React Ajax学习记录

首先react和Vue是一样的，本身只是一个框架，所以并不包含网络请求的功能。所以需要引入第三方。

axios网络请求库

• 封装XmlHttpRequest对象的ajax
• promise风格
• 可以在浏览器端和node服务器端

安装

yarn add axios 安装比较简单，这里貌似也没啥说的。

发送请求

axios.get().then(
  response=>{
    console.log('成功',response.data);
  },
  error=>{
    console.log('失败了',error);
  }
)

跨域问题解决

跨域问题需要通过代理来解决。axios有2种办法解决跨域。

1、修改package.json文件（简单但不推荐），在最后面加上一句"proxy":"你要访问的地址",例如："proxy":"http://localhost/:8000"。修改以后要重启脚手架，同时将你要请求的地址端口也改成3000(默认脚手架的地址)。但是要注意资源的同名路径问题。也就是说如果本身3000下有目录，那他就回优先返回3000端口下的内容，而不会转发到8000端口去请求内容了。

2、推荐 在src目录下创建setupProxy.js（文件名不可以修改）

const proxy = require('http-proxy-middleware')

module.exports = function(app){
    app.use(
        proxy('/api1',{ // api1 也就是第一个服务器地址，实际可以有多个请求地址。
            target:'http://localhost:8000',// 请求转发的实际路径
            changeOrigin:true, // 控制服务器收到的请求头中Host的值，默认是false，
            pathRewrite:{'^/api1':''} // 重写请求路径，需要将请求标识在url路径去掉
        }),
        proxy('/api2',{
            target:'http://localhost:9000',
            changeOrigin:true,
            pathRewrite:{'^/api2':''}
        })
        // ....
    )
}

注意上面的例子主要是针对低版本的，如果你在高版本的使用时可能会出现页面404的错误，可以使用下面的方式

const {createProxyMiddleware} = require('http-proxy-middleware')

module.exports = function(app){
    app.use(
        createProxyMiddleware('/server',{ // api1 也就是第一个服务器地址，实际可以有多个请求地址。
            target:'http://localhost:8000',// 请求转发的实际路径
            changeOrigin:true, // 控制服务器收到的请求头中Host的值，默认是false，
            pathRewrite:{'^/api1':''}
        }),
        createProxyMiddleware('/localhost',{
            target:'http://localhost:8000',// 请求转发的实际路径
            changeOrigin:true,
            pathRewrite:{'^/api2':''}
        })
    )
}

axios.get(`https://api.github.com/search/users?q={keyWord}`).then(
            response => {console.log('成功了',response.data);},
            error => {console.log('失败了',error);}
)