38.封装axios请求

使用axios提供的axios.interceptors.request和axios.interceptors.response来分别实现拦截请求和响应数据。
前端在请求时可以处理请求超时和携带一些Header信息；
在响应返回时下载文件操作需要单独处理，由于后端返回的数据是一个Blob对象，responseType='blob'，如果返回的错误信息是json格式时前端需要单独做处理。
request.js

//请求拦截
imoort axios from "axios";
//请求超时处理
axios.defaults.timeout = 300000
//定义headers信息，如有需要进行添加
axios.defaults.headers.Accept= 'application/json';
//定义请求地址
axios.defaults.baseURL = "http:localhost:5000"
axios.interceptors.request.use(function (config) {
  const { method, data } = config;
// header中携带其他信息
  if(token){
    config.headers['Authorization'] = 'Bearer ' + token;
  }
//将json格式传参转成form data形式传参，如果不需要则不用做其他操作直接返回config即可
  if (method.toLocaleLowerCase() === "post" && typeof data === "object") {
    config.data = qs.stringify(data);
  }
  return config;
},(error)=>{
  message.error(error.msg)
  return Promise.reject(error)
});

//响应拦截
axios.interceptors.response.use(
  function (response) {
    const status = Number(response.status) || 200;
    //没有授权，跳转登录页面
    if (status === 401) {
      message.error(response.data.msg);
      //跳转登录页面
      //  xxx
      return;
    }

    //处理文件下载操作
    if (response.request.responseType === "blob") {
      let _self = this;
      const fileReader = new FileReader();
      fileReader.readAsText(response.data);
      fileReader.onload = function (e) {
        try {
          const result = JSON.parse(e.target.result);
          if (result.code == 1) {
            message.error(response.data.msg);
            return Promise.reject(new Error(message));
          } else {
            return response;
          }
        } catch (e) {
          return Promise.reject(new Error(response.data.msg));
        }
      };
    } else {
      if (status !== 200 || response.data.code === 1) {
        message.error(response.msg);
        return Promise.reject(new Error(message));
      }
    }
    return response.data; // 返回的结果就会交给我们指定的请求响应的回调
  },
  function (error) {
    //错误-中断Promise请求
    message.error(error.msg);
    return new Promise(() => {});
  }
);

export default axios;

api.js

import request from "./request.js"
//封装请求方法
export const getLogin = (username, password) => {
  return request.post(`/login`, { username, password });
};

推荐axios-config