vue3 + axios 中断取消接口请求

前言

最近开发过程中,总是遇到想把正在请求的axios接口取消,这种情况有很多应用场景,举几个例子:

  1. 弹窗中接口请求返回图片,用于前端展示,接口还没返回数据,此时关闭弹窗,需要中断接口请求
  2. tab标签页根据后端返回数据,依次渲染,频繁切换标签,需要中断接口请求
  3. for循环中请求接口,遇到跳出循环情况,也需要中断接口请求
  4. 跳转路由,离开页面时,可能也需要中断接口请求

下面就是根据以上问题,找到的解决方案

正文

因为axios不同版本取消请求是不同的,目前最新的 axios 的取消请求api,推荐使用 AbortController ,旧版本的 CancelToken 在 v0.22.0 后弃用,截止到此片文章发表,npm上的axios版本号已经更新到v1.5.1,但是相信有一些项目的版本还是v0.x.x的,所以下面分别介绍两种取消方式,大家根据自己项目axios版本号,自行查看

在这里插入图片描述

v0.22.0 CancelToken

  1. get请求
<el-button type="primary" @click="sendGet()">发送get请求</el-button>
<el-button type="danger" @click="cancel()">取消请求</el-button>import {ref,onMounted,onUnmounted} from 'vue'
import axios from "axios";let source:any = null;
const sendGet = ()=>{//可以理解为给定每个接口一个标识source = axios.CancelToken.source();axios.get('请求url',{cancelToken: source.token}).then(res => {console.log("get请求",res)}).catch(err => {if (axios.isCancel(err)) {console.log('请求取消', err);} else {console.log('其他错误', err)}});
}const cancel = ()=>{source && source.cancel('手动调用 source.cancel方法,手动取消请求');
}

在这里插入图片描述

  1. post请求
<el-button type="success" @click="sendPost()">发送post请求</el-button>
<el-button type="danger" @click="cancel()">取消请求</el-button>import {ref,onMounted,onUnmounted} from 'vue'
import axios from "axios";let source:any = null;
const sendPost = ()=>{source = axios.CancelToken.source();axios.post("请求url",{},//传参,没有也必须加上{}{cancelToken: source.token}).then((res) => {console.log("post请求",res)}).catch(err => {if (axios.isCancel(err)) {console.log('请求取消', err);} else {console.log('其他错误', err)}})
}const cancel = ()=>{source && source.cancel('手动调用 source.cancel方法,手动取消请求');
}

在这里插入图片描述

v1.5.1 AbortController

使用fetch() 是一个全局方法,它的请求是基于 Promise 的
method - 请求方法,默认GET
signal - 用于取消 fetch

<el-button type="primary" @click="sendNewGet()">发送get请求</el-button>
<el-button type="danger" @click="cancelController()">取消新版请求</el-button>import {ref,onMounted,onUnmounted} from 'vue'
import axios from "axios";let controller:any = null;const sendNewGet = ()=>{controller = new AbortController();   // 新建一个AbortController实例fetch('请求url',{signal: controller.signal    // signal是AbortController实例的属性}).then(res => {console.log("新版get请求",res)//处理返回数据res.json().then(res1 => {console.log(res1)})}).catch(err => {console.log(err)});
}const cancelController = ()=>{controller && controller.abort();//调用abort方法
}

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

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

相关文章

StretchBlt()、Bitblt用法详解

1、CDC::StretchBlt BOOL StretchBlt( int x, int y,int nWidth,int nHeight, CDC* pSrcDC, intxSrc, int ySrc, int nSrcWidth, int nSrcHeight, DWORD dwRop) 功能&#xff1a;函数从源矩形中 复制 一个位图到目标矩形&#xff0c;必要时按目标设备设置的模式进行图像的拉…

【安全体系架构】——防御深度架构

防御深度架构&#xff1a; 防御深度架构是一种多层次的安全模型&#xff0c;旨在通过在网络和系统的各个层次上部署多个安全措施&#xff0c;以抵御不同类型的威胁和攻击。这个模型承认单一的安全措施可能无法全面防御所有潜在威胁&#xff0c;因此采用了多层次的安全防御策略…

【网络】网络编程套接字(一)

网络编程套接字 一 一、网络编程中的一些基础知识1、认识端口号2、认识TCP协议和UDP协议3、网络字节序 二、socket编程1、sockaddr结构2、简单的UDP网络程序Ⅰ、服务器的创建Ⅱ、运行服务器Ⅲ、关于客户端的绑定问题Ⅳ、启动客户端Ⅴ、本地测试Ⅵ、网络测试 一、网络编程中的一…

泛微全新低代码平台e-builder在沪发布,超千名与会者共商数字化转型

10月18日下午&#xff0c;泛微低代码平台体验大会在上海顺利举办&#xff0c;大会以“智能、协同、全程数字化”为主题&#xff0c;吸引了上千位政府及企事单位的信息化负责人参与。 活动现场&#xff0c;参会者身临其境地体验了泛微低代码平台&#xff0c;了解了泛微低代码平…

[论文笔记]Sentence-BERT[v2]

引言 本文是SBERT(Sentence-BERT)论文1的笔记。SBERT主要用于解决BERT系列模型无法有效地得到句向量的问题。很久之前写过该篇论文的笔记,但不够详细,今天来重新回顾一下。 BERT系列模型基于交互式计算输入两个句子之间的相似度是非常低效的(但效果是很好的)。当然可以通过…

WebDAV之π-Disk派盘 + 密码键盘

密码键盘是一款密码管理器,可以存储和管理需要受保护的数据。为方便日常使用,同时也是一款安全输入法,帮您安全便捷地填写账号密码、通用内容、卡包信息。 密码键盘使用军事级的 PBKDF2 有损加密算法保护您的根密码,使用军事级的 AES 加密算法保护您的存储数据。云端再额外…

数据库主键设计中自增ID和Guid的比较

SQL GUID和自增列做主键的优缺点 公司的数据库全部是使用GUID做主键的&#xff0c;很多人习惯使用int做主键。所以呢&#xff0c;这里总结一下&#xff0c;将两种数据类型做主键进行一个比较。 主键自增为什么比随机和自定义快&#xff1f; 1、如果表使用自增主键&#xff0…

分类预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost多输入分类预测

分类预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost多输入分类预测 目录 分类预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost多输入分类预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于BiLSTM-…

【Excel单元格类型的解析校验】Java使用POI解析excel数据

一、使用的maven依赖&#xff1a; <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.1.7</version> </dependency> <dependency><groupId>org.apache.poi</groupId&…

安装docker并在内安装mysql

如何卸载docker 1. 停止Docker服务&#xff1a; 在卸载Docker之前&#xff0c;首先需要停止Docker服务。在终端中运行以下命令停止Docker服务&#xff1a; sudo systemctl stop docker 2. 卸载Docker软件包&#xff1a; 接下来&#xff0c;你需要卸载Docker软件包。运行以下…

华为数通方向HCIP-DataCom H12-831题库(多选题:1-20)

第01题 如图所示,路由器所有的接口开启OSPF,图中标识的ip地址为设备的Loopback0接口的IP地址,R1、R2,R3的Loopback0通告在区域1,R4的Loopback0通告在区域0、R5的Lopback0通告在区域2,下列哪些IP地址之间可以相互Ping通? A、10.0.3.3和10.0.5.5 B、10.0.4.4和10.0.2.2 …

TensorFlow手动加载数据集(以mnist为例)

在进行Mnist手写识别的项目中&#xff0c;出现了Mnist数据集下载出错的问题&#xff0c;报出以下错误&#xff1a; Exception: URL fetch failure on https://s3.amazonaws.com/img-datasets/mnist.npz: None – [WinError 10060] 由于连接方在一段时间后没有正确答复或连接的主…

【CANoe】XML Test Module使用实例

文章目录 一、实操步骤1、增加XML Test Module节点2、配置XML Test Module节点3、XML Test Module节点增加CAPL脚本(.can文件)4、文件夹结构5、使用仿真节点开始测试6、测试结果与测试报告7、同理&#xff0c;在Test Setup也可如此操作 一、实操步骤 1、增加XML Test Module节…

【ubuntu】常用软件安装

【ubuntu】常用软件安装 前言安装搜狗输入法安装flameshot截图软件总结 前言 Ubuntu 是一个基于 Linux 内核的开源操作系统&#xff0c;它提供了简单易用的界面和丰富的功能&#xff0c;广受开发者和普通用户的喜爱。博主时常也需要经常切换Ubuntu系统进行开发和学习&#xff…

SEM和SD的区别和联系,以及其计算方法

http://t.csdnimg.cn/aHe99http://t.csdnimg.cn/aHe99

Android使用Navigation时如何获取fragment实例及齐公开方法和属性

使用了Navigation&#xff0c;则必然存在一个NavHostFragment&#xff0c;其它的Fragment都是它的子Fragment&#xff0c;所以&#xff0c;想获取其它fragment&#xff0c;就要从它的子fragment中获取&#xff0c;参考示例&#xff1a; //先获取NavHostFragment Fragment mMai…

【vue3】传送组件、Teleport

把test里的内容传送到test2 //test1.vue <template><div>test1<Teleport v-if"flag" to".aa">test1的内容</Teleport></div></template><script setup langts>import { ref,reactive,onMounted } from vueconst…

2023前端面试题总结

给大家推荐一个实用面试题库 1、前端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;web前端面试题库 Html5和CSS3 常见的水平垂直居中实现方案 最简单的方案当然是flex布局 .father {display: flex;justify-content…

在线JSON转EXCEL工具

全天下的柔情共十分&#xff0c;你占八分。你喊我名字那晚的凉风秋月算一分&#xff0c;其余所有占一分。 推荐 在线JSON转Excel工具 - WeJSON 工具简介 在线JSON转Excel工具&#xff0c;可以快速将JSON数组数据一键转换为Excel格式&#xff0c;方便数据的可视化和交流。 所…

Java中过滤器与拦截器的使用

目录 Filter过滤器 Filter作用时机 Filter的使用 过滤器链 过滤器执行顺序 测试 Filter实现简单登陆验证 Interceptor拦截器 Interceptor的使用 Interceptor的拦截路径 Interceptor执行时机 Interceptor实现登录验证 Filter与Interceptor区别 Filter过滤器 Filter…