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

在这里插入图片描述

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

前景提要:
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. 请求超时 && 网络错误单独判断,因为没有 responseif (error.message.indexOf("timeout") !== -1) alert("请求超时!请您稍后重试");if (error.message.indexOf("Network Error") !== -1) alert("网络错误!请您稍后重试");// 2. 根据 http 服务器响应的错误状态码,做不同的处理if (response) {switch (response.status) {case 404:alert("你所访问的资源不存在!");break;case 500:alert("服务异常!");break;default:alert("请求失败!");}}// 3. 服务器结果都没有返回(可能服务器错误可能客户端断网),断网处理:也可以跳转到断网页面if (!window.navigator.onLine) alert("服务器错误或者无网络"); // router.replace("/500");throw error;});}
}

取消请求

axios 取消请求的方式

axios 取消请求有两种 api。一种是 AbortController,一种是古老的 CancelToken ,已经被弃用了。

AbortController - Web API 接口参考 | MDN

我们主要使用第一种方式:

  1. 实例化取消控制器接口,控制器对象有一个信号标记signal
  2. 将该标记配置给 axios 同名的 signal配置
  3. 控制器对象调用abort()方法就能取消被标记了的请求。
const controller = new AbortController();axios.get('/foo/bar', {signal: controller.signal
}).then(function(response) {//...
});
// 取消请求
controller.abort()

封装取消请求功能

取消请求也是个基础功能,因此和全局错误拦截器一样在构造函数中注册拦截器。

取消请求:

  1. 为每一个请求生成一个控制器 controller,并添加 signal
  2. 维护一个 map,以 url 为 key,对应的 controller 为 value
  3. 要取消哪个请求就通过 url,获取它的 controller 来取消
  4. 在全局响应拦截器中,给所有请求添加 signal,并在请求结束后从 map 中剔除该 url 对应的 controller

封装类暴露两个方法:

  1. 取消全部请求
  2. 根据 url 取消请求
class HttpRequest {private readonly instance: AxiosInstance;private readonly abortControllerMap: Map<string, AbortController>;constructor(config: MyAxiosRequestConfig) {this.instance = axios.create(config);// 为每个请求都生成一个 signal,并以 url 为 key 添加入 mapthis.instance.interceptors.request.use(config => {// 如果具体方法中设置了 signal,这里就不再添加,避免覆盖。if (config.signal) return config;const controller = new AbortController();config.signal = controller.signal;const url = config.url || "";this.abortControllerMap.set(url, controller);return config;},(err: AxiosError) => {throw err;});// 响应完,从map中去除 urlthis.instance.interceptors.response.use(res => {const url = res?.config.url || "";this.abortControllerMap.delete(url);return res;},(err: AxiosError) => {const url = err?.config?.url || "";this.abortControllerMap.delete(url);throw err;});}/*** 取消全部请求*/cancelAllRequest() {for (const [, controller] of this.abortControllerMap) {controller.abort();}this.abortControllerMap.clear();}/*** 取消指定的请求* (并发上传文件的url通常是一样的,通过url取消请求会取消所有上传操作,故此方法不宜用来取消上传请求)* @param url 待取消的请求URL*/cancelRequest(url: string | string[]) {const urlList = Array.isArray(url) ? url : [url];urlList.forEach(_url => {this.abortControllerMap.get(_url)?.abort();this.abortControllerMap.delete(_url);});}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/159962.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023年测试如果想拿到心怡的offer必会的12大技能

01 业务熟悉 &#x1f3af; 1&#xff1a;熟悉本系统 测试人员参与测试的系统的各种业务场景&#xff0c;必须做到精熟 。一旦需求有改动&#xff0c;可以清楚快速的知道上下文。同时可以清楚的知道哪些点是需要重点测试的。 &#x1f3af; 2&#xff1a;熟悉跟本系统有通讯…

设计模式—结构型模式之适配器模式

设计模式—结构型模式之适配器模式 将一个接口转换成客户希望的另一个接口&#xff0c;适配器模式使接口不兼容的那些类可以一起工作&#xff0c;适配器模式分为类结构型模式&#xff08;继承&#xff09;和对象结构型模式&#xff08;组合&#xff09;两种&#xff0c;前者&a…

【蓝桥杯选拔赛真题10】C++求奇数和 青少年组蓝桥杯C++选拔赛真题 STEMA比赛真题解析

目录 C/C++求奇数和 一、题目要求 1、编程实现 2、输入输出 二、算法分析 <

在二维矩阵/数组中查找元素 Leetcode74, Leetcode240

这一类题型中二维数组的元素取值有序变化&#xff0c;因此可以用二分查找法。我们一起来看一下。 一、Leetcode 74 Leetcode 74. 搜索二维矩阵 这道题要在一个二维矩阵中查找元素。该二维矩阵有如下特点&#xff1a; 每行元素 从左到右 按非递减顺序排列。每行的第一个元素 …

速学数据结构 | (超级干货)业界程序员公认的实现栈最简单的方法!太简单了

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525;个人专栏:《Linux深造日志》《C干货基地》 ⛺️生活的理想&#xff0c;就是为了理想的生活! &#x1f4cb; 前言 &#x1f308;hello&#xff01; 各位铁铁们大家好啊&#xff0c;今天来给大家更新一下栈这个数据结构,…

STM32笔记-AD模数转换

目录 一、ADC介绍 二、ADC主要特征 三、ADC框图 1. ​​​​ 外部触发转换 ​ 2. 转换模式 3. 输入通道 4. 逻辑框图 四、校准 五、数据对齐 六、AD转换步骤 七、AD_Init(单通道AD转换)初始化函数配置 一、ADC介绍 1. 12位ADC是一种逐次逼近型模拟数字转换器。它有多达…

R语言中的自带的调色板--五种--全平台可用

R语言中的自带的调色板–五种–全平台可用

逆袭Flutter? Facebook 发布全新跨平台引擎 Hermes!

Facebook 于前日发布了新的 JavaScript 引擎&#xff1a;Hermes&#xff0c;专注于提高 React Native 应用的性能&#xff0c;并且在市面上那些内存较少、存储速度较慢且计算能力低下的移动设备上都有良好的表现。但是不是为了追赶Flutter&#xff1f;这块作者没有说明。 移动应…

天空卫士为集度智能汽车系上“安全带”

10月27日&#xff0c;集度汽车在北京正式发布了旗下首款量产车型——极越 01 SUV。极越 01 SUV 是一款集科技、智能、美学于一身的纯电动中大型SUV&#xff0c;号称全球首款“AI 汽车机器人”。作为集度的合作伙伴&#xff0c;天空卫士第一时间送上祝福&#xff0c;祝愿极越大卖…

ElasticSearch深度解析入门篇:高效搜索解决方案的介绍与实战案例讲解,带你避坑

ElasticSearch深度解析入门篇&#xff1a;高效搜索解决方案的介绍与实战案例讲解&#xff0c;带你避坑 1.Elasticsearch 产生背景 大规模数据如何检索 如&#xff1a;当系统数据量上了 10 亿、100 亿条的时候&#xff0c;我们在做系统架构的时候通常会从以下角度去考虑问题&a…

根据Word模板,使用POI生成文档

突然想起来有个小作业&#xff1a;需要根据提供的Word模板填充数据。这里使用POI写了一个小demo验证下。 测试用模板&#xff1a; 执行结果 1.引入依赖坐标 <dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId&…

初学Flutter:swiper实现

效果展示&#xff1a; flutter swiper 1、安装 card_swiper 2、引入card_swiper import package:card_swiper/card_swiper.dart;3、使用 这里我主要是对官网例子进行实践&#xff0c;主要是5种常用的swiper 1、普遍的swiper //custom swiper class CustomSwiper extends S…