axios之CancelToken取消请求

从 v0.22.0 开始,Axios 支持以 fetch API 方式—— AbortController 取消请求

此 API 从 v0.22.0 开始已被弃用,不应在新项目中使用

官网链接

1. 背景

最近项目中遇到一个场景,当连续触发一个请求时,如果是同一个接口,则保留最后一次的请求,之前的请求取消。

查阅了下axios文档,有一个属性CancelToken,把这个添加到axios配置中

 

2. 使用

1:在request时,添加cancelToken

  request: [(config: AxiosRequestConfig) => {const cacheKey = `${config.method}${config.url}`if (config.autoCancel) {removeCache(cacheKey)}config.cancelToken = new axios.CancelToken((c) => {caches[cacheKey] = c})return config},(error: any) => Promise.reject(error),],

2:在reponse时,删除key

  response: [(res: AxiosResponse) => {const cacheKey = `${res.config.method}${res.config.url}`if (res.config.autoCancel) {removeCache(cacheKey)}return res},(error: any) => Promise.reject(error),],

3:判断是否存在重复请求

const caches: Record<string, Canceler> = {}
function removeCache(key: string) {if (caches[key]) {caches[key]()delete caches[key]}
}

这里的autoCancel是为了解决url相同,请求参数不同时,自定义添加的,具体请求方式可以根据这个值来决定是否开启cancelToken

3. 全部代码

/*** 通过取消重复请求解决请求“竞态”问题* - 如何定义“重复”:method和url相同*/
import axios, { AxiosRequestConfig, Canceler, AxiosResponse } from 'axios'const caches: Record<string, Canceler> = {}
function removeCache(key: string) {if (caches[key]) {caches[key]()delete caches[key]}
}const cancelInterceptors = {request: [(config: AxiosRequestConfig) => {const cacheKey = `${config.method}${config.url}`if (config.autoCancel) {removeCache(cacheKey)}config.cancelToken = new axios.CancelToken((c) => {caches[cacheKey] = c})return config},(error: any) => Promise.reject(error),],response: [(res: AxiosResponse) => {const cacheKey = `${res.config.method}${res.config.url}`if (res.config.autoCancel) {removeCache(cacheKey)}return res},(error: any) => Promise.reject(error),],
}export default cancelInterceptors

在封装的axios里面添加配置

// 往request请求中添加配置
service.interceptors.request.use(...cancelInterceptors.request)// 往response请求中添加配置
service.interceptors.response.use(...cancelInterceptors.response)

在response失败error中axios返回了一个失败状态axios.isCancel(error)

(error: AxiosError) => {// if (axios.isCancel(error) && error.message === SCRM_CANCEL_MESSAGE) {//   // 被手动取消的数据统计接口,不展示提示if (axios.isCancel(error)) {// 被取消的接口,不展示提示} else {message.error(error.response?.statusText || error.message || '网络错误')}// 网络层面错误,如接口地址写错了会走到这里return Promise.reject(error)}

3. 原理

source file:axios/lib/adapters/xhr.js

1:创建请求

var request = new XMLHttpRequest()if (config.cancelToken) {// Handle cancellationconfig.cancelToken.promise.then(function onCanceled(cancel) {if (!request) {return;}request.abort();reject(cancel);// Clean up requestrequest = null;});
}

2:创建新的取消

在source file:axios/lib/cancel/CancelToken.js

  var token = this;executor(function cancel(message) {if (token.reason) {// Cancellation has already been requestedreturn;}token.reason = new Cancel(message);resolvePromise(token.reason);});
}

2:取消请求

 在axios/lib/adapters/xhr.js文件中取消request.abort();请求,

if (config.cancelToken) {// Handle cancellationconfig.cancelToken.promise.then(function onCanceled(cancel) {if (!request) {return;}request.abort();reject(cancel);// Clean up requestrequest = null;});}

笔记 

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

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

相关文章

【Redis-04 补充】Redis事务

【Redis-04 补充】Redis事务 1. 事务冲突的问题1.1 举例1.2 悲观锁1.3 乐观锁1.4 Redis中的乐观锁 WATCH key [key …]1.5 Redis事务三特性 2. 秒杀案例2.1 相关代码2.2 模拟并发工具httpd-tools 3. 设计一个秒杀系统3.1 预热库存3.2 秒杀请求3.3 生成订单3.4 限流与防刷 4. 总…

【代码随想录】【算法训练营】【第52天】 [647]回文子串 [516]最长回文子序列

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 LeetCode。 day 52&#xff0c;周五&#xff0c;开始补作业了~ 题目详情 [647] 回文子串 题目描述 647 回文子串 解题思路 前提&#xff1a;寻找回文子串&#xff0c;子串意味着元素连续 思路&#xff1a;…

JavaScript数据类型转换

目录 任务描述 相关知识 字符串转整数 字符串转小数 数字转字符串 布尔型与其他类型的相互转换 隐式转换 编程要求 任务描述 数据类型转换是开发过程中最常碰到的问题之一。 本关任务&#xff1a;函数mainJs()有三个字符串类型的参数a、b和c&#xff0c;你需要分别把…

Android 10.0 关于定制自适应AdaptiveIconDrawable类型的动态时钟图标的功能实现系列一

1.前言 在10.0的系统rom定制化开发中,在关于定制动态时钟图标中,原系统是不支持动态时钟图标的功能,所以就需要从新 定制动态时钟图标关于自适应AdaptiveIconDrawable类型的样式,就是可以支持当改变系统图标样式变化时,动态时钟 图标的背景图形也跟着改变,所以接下来就来…

jupyter中使用使用事件循环

1、背景 应该在jupyter中遇到过这种问题&#xff1a; “RuntimeError: This event loop is already running”. 这表示&#xff0c;你在jupyter中使用事件循环会出现无法执行&#xff0c;因为他不允许嵌套&#xff0c;所以可以用下面方式解决。 2、方法 By design asyncio …

低代码+定制:优化项目管理的新方案

引言 在当今快速变化的商业环境中&#xff0c;企业需要更加灵活、高效的项目管理工具。低代码平台作为一种新的开发方式&#xff0c;因其能够快速构建应用程序而受到广泛关注。与此同时&#xff0c;软件定制开发仍然是满足特定复杂需求的重要手段。在项目管理中&#xff0c;低代…

【RT摩拳擦掌】基于RT106L/S语音识别的百度云控制系统

【RT摩拳擦掌】基于RT106L/S语音识别的百度云控制系统 一 文档简介二 平台构建2.1 使用平台2.2 百度智能云2.2.1 物联网核心套件2.2.2 在线语音合成 2.3 playback语音数据准备与烧录2.4 开机语音准备与添加2.5 唤醒词识别词命令准备与添加 三 代码准备3.1 sln-local/2-iot 代码…

Caused by SSLError(SSLError(1, ‘[SSL: BAD_ECPOINT] bad ecpoint (_ssl.c:852)‘)

追根溯源&#xff1a; python在访问https请求时&#xff0c;在没有证书的情况下需要设置忽略证书&#xff0c;但有时候证书的忽略会引发其他异常&#xff0c;如&#xff1a; requests.exceptions.SSLError: HTTPSConnectionPool(host127.0.0.1, port443): Max retries exceed…

【开发环境】MacBook M2安装git并拉取gitlab项目,解决gitlab出现Access Token使用无效的方法

文章目录 安装Homebrew安装git打开IDEA配置git打开IDEA拉取项目 安装Homebrew /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"在iTerm等命令行工具打开后&#xff0c;输入上面的命令 之后根据中文提示完成Homebrew的下载…

使用StringStream处理字符串

使用StringStream处理字符串 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将深入探讨在Java中如何使用StringStream处理字符串&#xff0c;以及它的应…

高考填报志愿,是选就业前景?还是选自己的兴趣爱好?

一、 当前的就业形式 受yi情影响&#xff0c;全国的就业处于下滑趋势&#xff0c;互联网和实体企业呈现疲软势态&#xff0c;很多企业不得不裁员。大学毕业生人数几乎每年都会上涨&#xff0c;带来的是僧多粥少的就业状态。 考得好不如报得好 就业环境如此严峻的形势下&#…

itext生成pdf文件demo示例

需求 在PDF文件中植入一些信息&#xff08;pdf模版&#xff09; 制作模版 可以看到下面红色箭头标注位置&#xff0c;这都是我们需要动态写入数据的表单域&#xff0c;可以使用wps等工具来制作 点击编辑表单&#xff0c;可以给对应空间添加表单域&#xff0c;表单域名称是ke…

网络专线学习

准备工作&#xff1a; https://help.aliyun.com/zh/express-connect/user-guide/before-you-start?spma2c4g.11186623.0.0.593f6746C17guR 专线接入流程 https://help.aliyun.com/zh/express-connect/user-guide/process-of-creating-a-dedicated-physical-connection?spma2c…

Redis 哨兵主备切换的数据丢失问题应该怎么解决?

引言&#xff1a;Redis作为一种高性能的内存数据库&#xff0c;广泛应用于分布式系统中。为了保证服务的高可用性&#xff0c;Redis提供了哨兵&#xff08;Sentinel&#xff09;机制&#xff0c;用于监控和管理Redis实例的自动故障恢复。然而&#xff0c;即使在哨兵的保护下&am…

Golang | Leetcode Golang题解之第204题计数质数

题目&#xff1a; 题解&#xff1a; func countPrimes(n int) int {primes : []int{}isPrime : make([]bool, n)for i : range isPrime {isPrime[i] true}for i : 2; i < n; i {if isPrime[i] {primes append(primes, i)}for _, p : range primes {if i*p > n {break}…

idea 项目互联网转内网开发 依赖报错问题 maven问题

场景&#xff1a; 这个问题困扰好久&#xff0c;通过分析后&#xff0c;发现是maven配置问题&#xff0c;废话不多说&#xff0c;上干活。 问题描述 项目互联网从转内网开发&#xff0c;提前下载好repository&#xff0c;跟项目一起导入内网&#xff0c;导入后&#xff0c;发…

行内块元素的幽灵空白问题:揭秘与解决策略

在CSS布局中&#xff0c;行内块元素&#xff08;inline-block&#xff09;的使用可以提供更多的控制和灵活性&#xff0c;但它们也可能带来一些棘手的问题&#xff0c;尤其是所谓的“幽灵空白”问题。本文将探讨这一问题的原因&#xff0c;以及如何通过几种不同的方法来解决它。…

ubuntu 18 虚拟机安装(6) postgresql pg_dump pg_restore

ubuntu 18 虚拟机安装&#xff08;6&#xff09; postgres pg_dump pg_restore postgresql 10.3 下的 pg_dump、pg_restore https://blog.csdn.net/ctypyb2002/article/details/79881745 pg_dump pg_dump dumps a database as a text file or to other formats.Usage:pg_dum…

django带了一个权限系统

Django 自带了一个强大的权限系统&#xff0c;它允许开发者精细地控制应用程序中的访问权限。这个系统主要包括用户(User)、用户组(Group)、权限(Permission)以及对象权限(Object-level Permissions)几个核心组件。以下是该权限系统的详细解析&#xff1a; 1. 用户(User) 模型…

IPython高级技巧:使用%edit命令编辑变量和函数

IPython是一个强大的交互式Python解释器&#xff0c;它提供了许多有用的命令和功能来增强Python编程体验。%edit命令是IPython中一个非常实用的功能&#xff0c;它允许用户在IPython环境中直接编辑变量或函数&#xff0c;并立即应用更改。本文将详细介绍如何在IPython中使用%ed…