Axios取消请求:AbortController

AbortController

   AbortController() 构造函数创建了一个新的 AbortController 实例。MDN官网给出了一个利用AbortController取消下载视频的例子。

         核心逻辑是:利用AbortController接口的只读属性signal标记fetch请求;然后在需要取消请求的时候,调用AbortController接口的abort()方法立即取消请求,并抛出一个错误AbortError

const controller = new AbortController();
const signal = controller.signal;const url = "video.mp4";
const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");downloadBtn.addEventListener("click", fetchVideo);abortBtn.addEventListener("click", () => {controller.abort();console.log("Download aborted");
});function fetchVideo() {fetch(url, { signal }).then((response) => {console.log("Download complete", response);}).catch((err) => {console.error(`Download error: ${err.message}`);});
}

只读属性signal

        AbortController接口的只读属性 signal 返回一个 AbortSignal 实例对象,该对象可以根据需要处理 DOM 请求通信,既可以建立通信,也可以终止通信。

方法:abort()

        AbortController接口的 abort() 方法会在 DOM 请求完成之前中止它。它能够中止 fetch 请求、各种响应主体或者流的消耗。

取消Axios请求

既然 AbortController接口的 abort() 方法可以终止fetch请求、各种响应主体或者流的消耗,那么我们考虑将其和axios结合,来取消axios的请求。

        查看axios官网,也给出了相关介绍:

        为了便于在项目中使用,我们在对其进行一个简单的封装,示例如下:

//axios配置function createRequest() {const request = axios.create({baseURL: "https://geo.datav.aliyun.com",headers: {"Content-Type": "application/json;charset=utf-8",}})const cachePool = new Map()const encode = (baseURL, method, url, params) => {const str = `${baseURL}_${url}_${method}_${JSON.stringify(params || {})}`;const encoder = new TextEncoder();//接受一个字符串作为输入,返回一个包含 UTF-8 编码的文本的 Uint8Arrayconst bytes = encoder.encode(str)//使用Base64编码算法进行编码:将一个二进制字符串(例如,将字符串中的每一个字节都视为一个二进制数据字节)编码为 Base64 编码的 ASCII 字符串const encoded = btoa(String.fromCharCode(...bytes))return encoded}/*** 对Axios请求实例的config进行编码* */const configEncode = (config) => {//获取基本信息const baseURL = config.baseURL,method = config.method,url = config.url,params = config?.params || config?.data || {};//返回编码结果return encode(baseURL, method, url, params);}//请求拦截器request.interceptors.request.use((config) => {// 在发送请求之前做些什么console.log(config)const controller = new AbortController()config.signal = controller.signal//根据config配置信息进行编码const encodeKey = configEncode(config)console.log("encodeKey:", encodeKey)//判断请求是否存在if (cachePool.get(encodeKey)) {controller.abort()console.log('cachePool--cancel:', cachePool)} else {cachePool.set(encodeKey, { abort: controller })console.log('cachePool--set:', cachePool)}return config;},(error) => {// 对请求错误做些什么console.log(error);return Promise.reject(error);});//响应拦截器// 添加响应拦截器request.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么const encodeKey = configEncode(response.config)console.log('response---:', response, encodeKey)//缓存对象const cacheItem = cachePool.get(encodeKey)if (cacheItem) {console.log("res-success:删除缓存对象")cachePool.delete(encodeKey)}return response;}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么console.log('axios-error:', error)if (error.code === "ERR_CANCELED") {//被取消的axios请求console.warn(`被取消的重复请求~`)} else {//其它错误return Promise.reject(error);}});//返回return request}

        接下来做个简单的测试,

        const request = createRequest()const getData = () => {return request.get("/areas_v3/bound/420800_full.json", {params: {a: 1}})}getData().then(result => {console.log(result)})getData().then(result => {console.log(result)})getData().then(result => {console.log(result)})

        查看执行结果:连续发送了3次请求,后两个被取消掉,最终只有一个请求正常返回了请求结果。

其它取消Axios请求的方式

        参考:Vue:Axios前端拦截器_vue axios拦截器-CSDN博客

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

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

相关文章

python算法与数据结构---单调栈与实践

单调栈 单调栈是一个栈,里面的元素的大小按照它们所在栈的位置,满足一定的单调性; 性质: 单调递减栈能找到左边第一个比当前元素大的元素;单调递增栈能找到左边第一个比当前元素小的元素; 应用场景 一般用…

Ubuntu22.04安装4090显卡驱动

1、安装完Ubuntu系统,打完所有补丁后再进行后续操作 2、下载系统所需要的版本的NV显卡驱动,本次由于使用CUDA12.1,故选用的驱动版本为NVIDIA-Linux-x86_64-530.41.03.run 3、卸载NV驱动(只是保险起见,并不是一定会卸…

微信小程序登录获取手机号教程(超详细)

1. 背景介绍: 在我们开发微信小程序时,登录时,需要获取用户手机号作为唯一标识,下面我介绍一下获取手机号的教程。 本篇文章介绍后端获取方法: 前端工作 后端工作 前端 新建Page页面,在xxx.wxml中加入…

Shell脚本④循环语句for、while、until

目录 一.for 1. 九九乘法表 2.求1到10奇数和 3.累计加到100 (1)方法一 (2)方法2 二.while 1.猜价格小游戏 2.累加到100的方法三 三.until循环 1.累加到100方法四 四.嵌套循环 五.循环语句中break、exit和continue 1…

如何把标书制作精美

标书,作为一种正式的文件,其制作需要我们花费心思。精美、专业的标书不仅能准确传达信息,还能给阅读者留下深刻印象。那么,如何才能制作出精美的标书呢?接下来,我会从五个方面为您详细解析。 一、内容至上 …

RabbitMQ简单模式和工作模式

RabbitMQ 是一个消息队列中间件,用于在分布式系统中进行消息传递。在 RabbitMQ 中,有几种工作模式,其中简单模式和工作模式是其中两种基本的模式之一。 简单模式(Simple Mode): 在简单模式中,有…

前端 - 视觉呈现技术

前言 不知道大家有没有在微信中看见过,那种特别炫酷的h5,从事前端工作的伙伴看着这么炫酷的效果,又不知如何实现。本文就带你走进前端高阶视觉特效。 特效 视觉呈现做的最熟的,我觉得应是视频了,每个视频工具都能根…

使用封装函数判断素数

#include<stdio.h> int judgeprime(int n) //判断是不是素数 { int i 0; int j 1; //默认素数&#xff0c;判断之后若不是素数&#xff0c;返回j0&#xff0c;否则返回j1 for (i 2; i < n; i) {if (n%i 0) //有其他共因数&#xff0c;不为素数{j 0;break;} }…

26.删除排序数组中的重复项(力扣LeetCode)

26.删除排序数组中的重复项 题目描述 给你一个 非严格递增排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nu…

v-if 导致 elementui 表单校验失效问题解决

问题 在使用 elementui 表单的过程中&#xff0c;某些表单项需要通过 v-if 来判断是否展示&#xff0c;但是这些表单项出现了检验失效的问题。 解决方法 1、给需要 v-if 判断的表单项添加 key 值 <el-form ref"form" :model"form"><el-form-i…

【Unity学习笔记】创建人物控制器

人物左右移动 1 导入模型&#xff0c;如果没有模型&#xff0c;则在 窗口-资产商店-free sample 找到人物模型 2 在 窗口-包管理中 导入自己的模型 3 在自己的资产文件夹中找到Prefabs Base HighQuality MaleFree1模型&#xff0c;导入到场景中 4 Assets中创建C#项目 写入如下…

四、MySQL之DML DQL

有关数据表的DML操作 INSERT 针对于数据的插入DELETE 针对于数据的删除UPDATE 针对于数据的修改 4.1 INSERT语句 INSERT INTO 表名 [(列名1,列名2,....)] VALUES (值1&#xff0c;值2&#xff0c;...); 默认情况下&#xff0c;一条插入命令只针对一行进行影响INSERT INTO 表…

Leetcode:二分搜索树层次遍历

题目&#xff1a; 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。 示例&#xff1a; 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;[[3],[9,…

使用阿里云的oss对象存储服务实现图片上传(前端vue后端java详解)

一&#xff1a;前期准备&#xff1a; 1.1&#xff1a;注册阿里云账号&#xff0c;开启对象存储oss功能&#xff0c;创建一个bucket&#xff08;百度教程多的是&#xff0c;跟着创建一个就行&#xff0c;创建时注意存储类型是标准存储&#xff0c;读写权限是公共读&#xff09;…

《吐血整理》高级系列教程-吃透Fiddler抓包教程(24)-Fiddler如何优雅地在正式和测试环境之间来回切换-中篇

1.简介 在开发或者测试的过程中&#xff0c;由于项目环境比较多&#xff0c;往往需要来来回回地反复切换&#xff0c;那么如何优雅地切换呢&#xff1f;宏哥今天介绍几种方法供小伙伴或者童鞋们进行参考。 2.实际工作场景 2.1问题场景 &#xff08;1&#xff09;已发布线上…

YOLOv8改进 | Conv篇 | 利用DualConv二次创新C2f提出一种轻量化结构(轻量化创新)

一、本文介绍 本文给大家带来的改进机制是利用DualConv改进C2f提出一种轻量化的C2f,DualConv是一种创新的卷积网络结构,旨在构建轻量级的深度神经网络。它通过结合33和11的卷积核处理相同的输入特征映射通道,优化了信息处理和特征提取。DualConv利用组卷积技术高效排列卷积…

2024美赛数学建模D题思路模型代码论文

2024美赛数学建模各题思路模型代码&#xff1a;开赛后第一时间更新&#xff0c;更新见文末 一、2023题目重述 Homer是棒球运动中的术语&#xff0c;是非正式的美式英语单词。令人惊讶的是&#xff0c;Homer&#xff08;本垒打&#xff09;在剑桥词典网站的搜索次数超过79000次…

JavaScript基础之输入输出与变量常量详解

输入和输出 输出和输入也可理解为人和计算机的交互&#xff0c;用户通过键盘、鼠标等向计算机输入信息&#xff0c;计算机处理后再展示结果给用户&#xff0c;这便是一次输入和输出的过程。 举例说明&#xff1a;如按键盘上的方向键&#xff0c;向上/下键可以滚动页面&#x…

webpack常见的loader和plugin

Webpack 中的 Loader 和 Plugin 是两个核心概念&#xff0c;它们用于处理不同类型的文件和执行一些额外的构建任务。下面是一些常见的 Webpack Loader 和 Plugin&#xff1a; 常见 Loader: babel-loader: 用于将 ECMAScript 2015 代码转译为向后兼容的 JavaScript。 style-load…

【Spring Boot 3】【JPA】日期时间类型持久化

【Spring Boot 3】【JPA】日期时间类型持久化 背景介绍开发环境开发步骤及源码工程目录结构背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中,每次学习新技术总是要花…