axios 全局错误处理和请求取消

卡列尼娜翠花

已于 2023-11-03 02:25:05 修改

阅读量1.5k

点赞数

分类专栏： Axios 文章标签：前端 axios 请求取消错误处理 typescript

于 2023-11-03 01:39:47 首次发布

本文链接：https://blog.csdn.net/qq_43220213/article/details/134194481

版权

本文介绍了如何在axios中实现全局错误处理和请求取消。全局错误处理通过在构造函数中注册响应拦截器实现，特别关注了取消请求时的状态处理。对于取消请求，主要采用AbortController方式，创建控制器并将其信号传递给axios配置。同时，文章封装了一个功能，通过维护一个url与controller的映射，方便按需或全部取消请求。

摘要由CSDN通过智能技术生成

在这里插入图片描述

这两个功能都是用拦截器实现。

前景提要：
ts 简易封装 axios，统一 API
实现在 config 中配置开关拦截器

全局错误处理

在构造函数中，添加一个响应拦截器即可。在构造函数中注册拦截器的好处是，无论怎么实例化封装类，这个错误拦截器都会被注册进实例。

其中有个注意点，就是请求取消。取消请求会导致响应 promise 状态为 rejected，这样就会触发响应拦截器的 onRejected 回调。因此要单独处理请求的请求情况，将它与请求错误区分开来。

class HttpRequest {
   
   	private readonly instance: AxiosInstance;
  
  	constructor(config: MyAxiosRequestConfig) {
   
      	this.instance = axios.create(config);
      
				// axios http 错误处理（超出 2xx 范围的 http 状态码都会触发该函数）
        this.instance.interceptors.response.use(null, (error: AxiosError) => {
   
            // 手动取消请求会导致“错误”触发
            if (error.message === "canceled") alert("请求取消成功");

            const {
    response } = error;
            // 1. 请求超时 && 网络错误单独判断，因为没有 response
            if (error.message.indexOf("timeout") !== -1) alert("请求超时！请您稍后重试");
            if (error