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.mzph.cn/news/130486.shtml

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

相关文章

RK3588 ubuntu系统安装opencv

废话不多说直接上步骤&#xff1a; 先切换至root用户 sudo su 输入密码先更新一下本地软件 apt update apt upgrade 安装相关环境 apt install build-essential cmake git pkg-config libgtk-3-dev \ libavcodec-dev libavformat-dev libswscale-dev libv4l-dev libxvidcore-…

Vuex源码-各原理简单总结

1&#xff0c;简单总结 Vuex就是一个构造函数&#xff0c;他拥有install方法和Store类这两个属性。在vue初始化调用new Vue的时候&#xff0c;将store作为参数传入&#xff0c;然后调用Vue.use()实际是调用install方法将store这个实例挂载到全局&#xff0c;从而可以保证全局只…

基础课19——客服系统知识库的搭建流程

1.收集整理业务数据 注意&#xff1a;我们在做业务数据收集时&#xff0c;往往是甲方提供给我们的&#xff0c;这时就需要确定一个标准&#xff0c;否则对知识库梳理工作会带来很大的难度&#xff0c;建议和甲方沟通确认一个双方都统一的知识库原材料。 2.创建知识库 在创建知…

Docker基础(简单易懂)

目录 一、docker是什么 核心概念 二、docker安装 1、卸载docker 2、使用yum 安装 三、docker常用命令 1、帮助命令 2、镜像命令 1&#xff09;查看镜像 2&#xff09;查询镜像 3&#xff09;拉取镜像 4&#xff09;删除镜像 3、容器命令 四、容器数据卷 五、Dock…

深度学习之基于Tensorflow人脸面部表情识别系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 基于Tensorflow的人脸面部表情识别系统是一种基于深度学习技术的图像处理应用&#xff0c;该系统主要通过人脸图像数…

CoCa论文笔记

摘要 计算机视觉任务中&#xff0c;探索大规模预训练基础模型具有重要意义&#xff0c;因为这些模型可以可以极快地迁移到下游任务中。本文提出的CoCa&#xff08;Contrastive Captioner&#xff09;&#xff0c;一个极简设计&#xff0c;结合对比损失和captioning损失预训练一…

面试题:有一个 List 对象集合,如何优雅地返回给前端?

文章目录 1.业务背景每个对象里面都带上了重复的一个sessionId数据&#xff0c;我想提出来该怎么办&#xff1f; 2.实体类3.自定义Mapper和xml文件4.Service层5.Controller层 1.业务背景 业务场景中&#xff0c;一个会话中存在多个场景&#xff0c;即一个session_id对应多个sc…

c#字符串格式化

字符串格式化是一种将变量的值插入到字符串中的方法。它允许我们创建动态的字符串&#xff0c;其中包含变量的值。 string.Format 通过在字符串中使用占位符{0}&#xff0c;{1}等&#xff0c;我们可以指定要插入的变量的位置。然后&#xff0c;通过在string.Format方法的参数…

Zabbix如何监控腾讯云NAT网关

1、NAT网关介绍 NAT 网关&#xff08;NAT Gateway&#xff09;是一种支持 IP 地址转换服务&#xff0c;提供网络地址转换能力&#xff0c;主要包括SNAT&#xff08;Source Network Address Translation&#xff0c;源网络地址转换&#xff09;和DNAT&#xff08;Destination N…

如何使用Python和Matplotlib创建双Y轴动态风格折线图 | 数据可视化教程

前言 我的科研论文中需要绘制一个精美的折线图&#xff0c;我的折线图中有三条曲线&#xff0c;分别表示期望角速度指令信号&#xff0c;和实际的角速度信号&#xff0c;还有实际的航向角信号&#xff0c;现在我已经拥有了数据&#xff0c;使用Python中matplotlib.plt.plot来直…

421.数组中两个数的最大异或值

​​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;421. 数组中两个数的最大异或值 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; int 型 数据有 32 位。从最高位开始逐位判断能否为 1&#xff0c;若可以&#xff0c;该位置 1&#xff0c;否…

Java线程的基本概念和五种状态

1. 线程 1.1 创建线程 创建线程通常有以下三种方式&#xff1a; 实现 Runnable 接口&#xff0c;并重写其 run 方法&#xff1a; public class J1_Method01 {public static void main(String[] args) {System.out.println("Main线程的ID为&#xff1a;" Thread.curr…

CentOS 7 通过 yum 安装 MariaDB(Mysql)

这一版取消了修改配置的操作&#xff0c;改成每次创建数据库时手动指定字符集编码&#xff1b;这一版取消了修改密码的操作&#xff0c;保留 MariaDB 使用无密码的情况&#xff0c;即密码是 ""。 安装步骤&#xff1a; 以下操作都以 root 用户进行操作 以下操作都以 …

公安涉密视频会议建设方案

公安涉密视频会议建设方案的制定需要考虑多方面因素。其一般是在复杂涉密网络环境中部署&#xff0c;怎样的内部保密部署方可保障涉密会议最大程度的加密进行呢&#xff1f;以下是从不同维度建设方案&#xff0c;可以根据实际应用场景进行相应的修改以及配置与之匹配的视频会议…

〔001〕虚幻 UE5 发送 get、post 请求、读取 json 文件

✨ 目录 🎈 安装 varest 扩展🎈 开启 varest 扩展🎈 发送 get 请求🎈 发送 post 请求🎈 读取 json 文件🎈 安装 varest 扩展 打开 虚幻商城,搜索 varest 关键字进行检索, varest 是一个 api 调用插件,支持 http/https 请求,也支持 json 文件的读取,最关键是该…

mermaid学习第一天/更改主题颜色和边框颜色/《需求解释流程图》

mermaid 在线官网&#xff1a; https://mermaid-js.github.io/ 在线学习文件&#xff1a; https://mermaid.js.org/syntax/quadrantChart.html 1、今天主要是想做需求解释的流程图&#xff0c;又不想自己画&#xff0c;就用了&#xff0c;框框不能直接进行全局配置&#xff0…

动态路由协议OSPF优化提速特性

1.OSPF协议通信过程与部署&#xff1b; 2.OSPF协议在项目上的应用场景&#xff1b; 3.OSPF有哪些优化特性&#xff1f; - OSPF - 开放式最短路径优先 - 一个动态路由协议 - 路由协议 - 理解魏 运行在路由器的一个软件 - 目的&#xff1a;为了帮助路由器和路由器彼…

Spring Boot 常见面试题

目录 1.Spring Boot 快速入门什么是 Spring Boot&#xff1f;有什么优点&#xff1f;Spring Boot 与 Spring MVC 有什么区别&#xff1f;Spring 与 Spring Boot 有什么关系&#xff1f;✨什么是 Spring Boot Starters?Spring Boot 支持哪些内嵌 Servlet 容器&#xff1f;如何设…

【LeetCode刷题-队列】--933.最近的请求次数

933.最近的请求次数 class RecentCounter {Queue<Integer> queue new LinkedList<>();public RecentCounter() {}public int ping(int t) {queue.offer(t);while(t - queue.peek() > 3000){queue.poll();}return queue.size();} }/*** Your RecentCounter obje…

游戏在小米设备上因自适应刷新率功能,帧率减半

1&#xff09;游戏在小米设备上因自适应刷新率功能&#xff0c;帧率减半 2&#xff09;Lua在计算时出现非法值&#xff0c;开启Debugger之后不再触发 3&#xff09;如何在Unity中实现液体蔓延的效果 这是第357篇UWA技术知识分享的推送&#xff0c;精选了UWA社区的热门话题&…