likes
comments
collection
share

axios封装错误请求函数

作者站长头像
站长
· 阅读数 525

在使用axios作为请求工具时我们通常不在catch中对错误操作进行处理,我们可以将请求错误的操作放在响应拦截器中进行,日常开发只需要在then做业务即可。

先定义错误代码对应的返回提示

const ErrorCodeMessage = {
  200: "服务器成功返回请求的数据。",
  201: "新建或修改数据成功。",
  202: "一个请求已经进入后台排队(异步任务)。",
  204: "删除数据成功。",
  400: "发出的请求有错误,服务器没有进行新建或修改数据的操作。",
  401: "用户没有权限(令牌、用户名、密码错误)。",
  403: "用户得到授权,但是访问是被禁止的。",
  404: "发出的请求针对的是不存在的记录,服务器没有进行操作。",
  406: "请求的格式不可得。",
  410: "请求的资源被永久删除,且不会再得到的。",
  422: "当创建一个对象时,发生一个验证错误。",
  500: "服务器发生错误,请检查服务器。",
  502: "网关错误。",
  503: "服务不可用,服务器暂时过载或维护。",
  504: "网关超时。",
};

设置响应拦截器,在第二个回调函数里面设置响应错误的事件,查找错误代码对应的提示文字如果没有就提示请求错误,如果有就提示状态码和提示信息。

import { message } from "antd";
axios.interceptors.response.use(
  (config:any) => {
    /**访问成功**/    reutrn config;
  },
  error => {
    let errorCode: number = error.response.status;
    let responseMessage: string | undefined = (ErrorCodeMessage as any)[errorCode + ""];
    message.error(responseMessage ? `${errorCode}:${responseMessage}` : "请求错误");
    return Promise.reject(error);
  }
);