正在进入ing...

React Ajax学习记录

发布时间:2022-01-12 浏览量: 50 文章分类: 前端相关

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

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);}
)