react中发送请求-学习笔记

本文图片来源于尚硅谷课程：https://www.bilibili.com/video/BV1wy4y1D7JT?p=72&spm_id_from=pageDriver

1. xhr发送Ajax请求

2. 使用axios

因为react中不直接操作DOM，故不适合使用JQuery，且JQuery库比较大，且请求结果为回调函数形式返回，容易形成毁掉地狱，故推荐使用轻量级且返回结果为promise对象的axios。

2.1 安装axios

使用yarn或者npm命令安装axios

yarn add axios
npm i axios

2.2 发送axios请求

axios请求返回promise对象，可通过then方法获取请求结果，catch方法捕获异常。

2.2.1 axios常见请求发送方式

axios({
    method:"POST",  // 若不设置，默认为GET请求
    url:'/user/12345',
    //当`url`是相对地址的时候，设置`baseURL`自动添加在url之前会非常方便
    baseURL:'https://some-domain.com/api/',
    //`headers`选项是需要被发送的自定义请求头信息
    headers: {'X-Requested-With':'XMLHttpRequest'},
    //`params`选项是要随请求一起发送的请求参数----一般链接在URL后面
    //他的类型必须是一个纯对象或者是URLSearchParams对象
    params: {
      ID:12345
    },
    //`data`选项是作为一个请求体而需要被发送的数据
    //该选项只适用于方法：`put/post/patch`
    data:{
        firstName:"Fred",
        lastName:"Flintstone"
    },
    //`timeout`选项定义了请求发出的延迟毫秒数
    //如果请求花费的时间超过延迟的时间，那么请求会被终止
    timeout:1000,
    //`withCredentails`选项表明了是否是跨域请求,默认是false
    withCredentials:false,//default,
    //返回数据的格式
    //其可选项是arraybuffer,blob,document,json,text,stream
    responseType:'json',//default
});

不同请求方式别名简写，可不用设置method

axios.request(config);

axios.get(url[,config]);

axios.delete(url[,config]);

axios.head(url[,config]);

axios.post(url[,data[,config]]);

axios.put(url[,data[,config]])

axios.patch(url[,data[,config]])

(1) GET请求

//请求携带数据直接写在url后面
axios.get('/user?ID=12345')
  .then(function(response){
    console.log(response.data);
  })
  .catch(function(err){
    console.log(err);
  });
//请求携带数据写在第二个参数的params属性中
axios.get('/user',{
  params:{
    ID:12345
  }
})
.then(function(response){
  console.log(response.data);
})
.catch(function(err){
  console.log(err);
});

(2) Post请求

axios.post('/user',{
  firstName:'Fred',
  lastName:'Flintstone'
})
.then(function(res){
  console.log(res.data);
})
.catch(function(err){
  console.log(err);
});

(3) 一次性并发多个请求

function getUserAccount(){
  return axios.get('/user/12345');
}
function getUserPermissions(){
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
  .then(axios.spread(function(acct,perms){
    //当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果
  }))

2.2.2 请求返回的内容

{
  data:{},
  status:200,
  //从服务器返回的http状态文本
  statusText:'OK',
  //响应头信息
  headers: {},
  //`config`是在请求的时候的一些配置信息
  config: {}
}

2.2.3 拦截器

//添加一个请求拦截器
axios.interceptors.request.use(function(config){
  //在请求发出之前进行一些操作，例如修改配置
  return config;
},function(err){
  //Do something with request error
  return Promise.reject(error);
});
//添加一个响应拦截器
axios.interceptors.response.use(function(res){
  //在这里对返回的数据进行处理
  return res;
},function(err){
  //Do something with response error
  return Promise.reject(error);
})

// 取消拦截器
var myInterceptor = axios.interceptor.request.use(function(){/*....*/});
axios.interceptors.request.eject(myInterceptor);

2.2.4 处理错误

axios.get('/user/12345')
  .then(res => {},err => {})
  .catch(function(error){
    if(error.response){
      //请求已经发出，但是服务器响应返回的状态吗不在2xx的范围内,可根据不同错误码进行错误处理
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.header);
    }else {
      //一些错误是在设置请求的时候触发
      console.log('Error',error.message);
    }
    console.log(error.config);
  });

2.2.5 案例

2.3 解决跨域问题

使用代理服务器解决跨域问题，原理如下

配置代理有两种方式：
(1) 在package.json中添加代理配置，并在发送请求处将请求路径的协议、域名、端口改为和当前客户端一致，并重启项目。


(2) 在项目src下配置setupProxy.js配置文件（不可修改文件名称），配置具体的代理规则（语法规则为common.js）。

3. fetch发送请求

优化1：

优化2：