前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >axios封装错误请求函数

axios封装错误请求函数

作者头像
用户6256742
发布2022-07-06 15:04:14
1.1K0
发布2022-07-06 15:04:14
举报
文章被收录于专栏:网络日志网络日志

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

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

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

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

代码语言:javascript
复制
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);
  }
);
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档