二次封装Axios完全体

发布时间 2023-06-13 21:28:39作者: 前端4u
import axios, { Axios } from "axios";
import type { AxiosRequestConfig } from "axios";
import { message } from "antd";

// 功能失败的错误原因
const authErrMessage: any = {
  10031: "登录失效,需要重新登录",
  10032: "您太久没登录,请重新登录~",
  10033: "账户未绑定角色,请联系管理员绑定角色",
  10034: "该用户未注册,请联系管理员注册用户",
  10035: "code 无法获取对应第三方平台用户",
  10036: "该账户未关联员工,请联系管理员做关联",
  10037: "账号已无效",
  10038: "账号未找到",
};
// 请求失败的错误原因
export const networkErrMessage: any = {
  400: "错误的请求",
  401: "未授权,请重新登录",
  403: "拒绝访问",
  404: "未找到该资源",
  405: "请求方法未允许",
  408: "请求超时",
  500: "服务器端出错",
  502: "网络错误",
  503: "服务不可用",
  504: "网络超时",
  505: "http版本不支持该请求",
};
//所有请求列表容器
const requestListMap=new Map();

//根据请求生成唯一的key值

function getRequestKey(config:AxiosRequestConfig){
  const {url,method,params={},data={}}=config;
  return [url,method,JSON.stringify(params),JSON.stringify(data)].join('&');
};



//添加key
function addRequestKey(config:AxiosRequestConfig){
  const requestKey=getRequestKey(config);
  config.cancelToken=new axios.CancelToken((cancel)=>{
    if(!requestListMap.has(requestKey)){
      requestListMap.set(requestKey,{
        cancel,
        pathname:window.location.pathname,
      })
    }
  })
};

//删除请求key
function  removeRequestKey(config:AxiosRequestConfig){
  const requestKey=getRequestKey(config);
  if(requestListMap.has(requestKey)){
    const {cancel}=requestListMap.get(requestKey);
    cancel();
    requestListMap.delete(requestKey);
  }
};

const requesttest=axios.create({
  baseURL:process.env.REACT_APP_API,
  headers:{},
  timeout:20000
});
requesttest.interceptors.request.use(
  (config)=>{
    const token=localStorage.getItem('token');
        if(token){
          config.headers.token=token;
        };
        removeRequestKey(config);
        addRequestKey(config);
        return config
  }
);

requesttest.interceptors.response.use(
  (response)=>{
    removeRequestKey(response.config);
    const code=response.data.code;
    if(code===20000){
      return response.data.data;
    }else{
      let errMessage=authErrMessage[code];
      if(errMessage){
        //功能出错,需要特殊处理,例如退出登录等
      }else{
        errMessage=response.data.message;
      };
      message.error(errMessage);
      return Promise.reject(errMessage);
    }
  },
  (error)=>{
    error.config&&removeRequestKey(error.config);
    let errMessage='未知错误,请练习管理员解决';
    if(error.response){
      //error.response有值,说明服务器有响应,响应结果是错误的,要根据状态码error.response.status来提示错误
      errMessage=networkErrMessage[error.response.status];
    }else{
      //error.response没有值,说明服务器没有响应,请求在客户端就失败了
       if(error.message.indexOf('timeout')>-1){
        //请求超时
        errMessage='当前网络环境不稳定,请换网试试';
       }else if(error.message.indexOf('Network')>-1){
        //断网了
        errMessage='没有检测到网络,请打开网络连接试试';
       }else if(error.message.indexOf('canceled')>-1){
        errMessage='请求被取消了'
       }
    };
    message.error(errMessage);
    return Promise.reject(errMessage);
  }
);

export default requesttest