离开A页面时,取消A页面的axios接口数据请求

需求:从A页面跳转至B页面时,要取消A页面的axios请求;有时候,我们可能需要在发送请求后取消它,比如用户在请求还未完成时离开了当前页面或者执行了其他操作,本文将介绍如何在使用 Axios 发送请求时取消这些请求。

Axios 提供了 CancelToken 类来创建取消标记。该类中有个source()方法。取消标记实际上是一个包含 cancel 方法的对象。代码如下;

import axios from 'axios';// 创建取消标记
const source = axios.CancelToken.source();// 发送请求并关联取消标记axios.get('/api/data', {cancelToken: source.token
});

然后,在Vue Router的导航守卫中,监听路由变化,在离开页面时取消之前的请求:

import axios from 'axios';router.beforeEach((to, from, next) => {source.cancel('路由跳转,取消请求');next();
});

 也可以在vue组件的beforeDestory()钩子中或者destory()去取消请求:

destroyed () {//window.removeEventListener('resize', this.screenAdapter)//this.$socket.unRegisterCallBack('hotData')  // 取消请求source.cancel('请求取消的原因');},

综上所述:主要是利用axios 所提供的cancelToken.source()去创建取消标记即

const source = axios.CancelToken.source();

然后在发送请求时去关联标记,即cancelToken: source.token;

最后在合适的时机用source.cancel()去取消请求

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

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

相关文章

Apache反向代理的功能和設置

Apache反向代理是Apache HTTP伺服器的一種功能,可以讓伺服器接收客戶端的請求並將其轉發到其他伺服器,然後將這些伺服器的回應返回給客戶端。這樣,客戶端就像直接訪問Apache伺服器一樣,而實際上是在訪問其他的伺服器。 Apache反向…

【Altium Designer 22原理图,PCB】

Altium Designer 22-原理图,PCB ■ AD22■ 工程■ 工程之外的文件 ■ AD22-画原理图■ 原理图库的设计■ 操作心得■ 元件库来源■ 检查原理图库的正确性并生成报告 ■ 原理图的设计■ 原理图页的大小设置■ 设置栅格100mil■ 放置元器件■ 元件的复制,剪…

从 MySQL 到 ClickHouse 实时数据同步 —— Debezium + Kafka 表引擎

目录 一、总体架构 二、安装配置 MySQL 主从复制 三、安装配置 ClickHouse 集群 四、安装 JDK 五、安装配置 Zookeeper 集群 六、安装配置 Kafaka 集群 七、安装配置 Debezium-Connector-MySQL 插件 1. 创建插件目录 2. 解压文件到插件目录 3. 配置 Kafka Connector …

常见UI设计模式有哪些?从小白到资深必学

通过了解如何以及何时使用,每种 UI 设计模式都有其特定的目的,可以创建一个一致高效的界面。UI 设计模式为用户界面设计者提供了一种通用语言,并为网站和应用程序的用户提供了一致性。本指南,即时设计总结了 UI 设计模式和 UI 设计…

执法记录仪如何防抖

影像记录发展至今,防抖已是必备要素,实际拍摄过程中,或通过硬件的运动补偿,或通过软件的加工处理,来抵消抖动对拍摄的影响。 到现在为止,已经有哪些防抖技术,它们各有什么优劣呢? …

HTTP协议的总结

参考 https://www.runoob.com/http/http-tutorial.html 1.简介 HTTP(超文本传输协议,Hypertext Transfer Protocol)是一种用于从网络传输超文本到本地浏览器的传输协议。它定义了客户端与服务器之间请求和响应的格式。HTTP 工作在 TCP/IP 模…

美客多、Lazada商家必须知道的养号技巧,助力打造爆款!

在Lazada平台开店,每个商家都渴望打造出自己的爆款产品。爆款不仅能为店铺带来大量流量,还能显著提升店铺和其他产品的转化率。然而,要想成功打造爆款,并非易事,需要掌握一些关键的小技能。 在Lazada平台,商…

每日OJ题_BFS解决拓扑排序③_力扣LCR 114. 火星词典

目录 力扣LCR 114. 火星词典 解析代码 力扣LCR 114. 火星词典 LCR 114. 火星词典 难度 困难 现有一种使用英语字母的外星文语言,这门语言的字母顺序与英语顺序不同。 给定一个字符串列表 words ,作为这门语言的词典,words 中的字符串已…

十五、Java中I/O流

1、流的基本概念 1)流的概念 流:在Java中所有的数据都是使用流读写的。流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象。即数据在两设备间的传输称为流,流的本质就是数据传输,根据数据传输特性将流抽象为各种类。 (1)按照流向分:输入流、输出流。…

网络靶场实战-物联网安全qiling框架初探

背景 Qiling Framework是一个基于Python的二进制分析、模拟和虚拟化框架。它可以用于动态分析和仿真运行不同操作系统、处理器和体系结构下的二进制文件。除此之外,Qiling框架还提供了易于使用的API和插件系统,方便使用者进行二进制分析和漏洞挖掘等工作…

【求助】西门子S7-200PLC定时中断+数据归档的使用

前言 已经经历了种种磨难来记录我的数据(使用过填表程序、触摸屏的历史记录和数据归档)之后,具体可以看看这篇文章:🚪西门子S7-200PLC的数据归档怎么用?,出现了新的问题。 问题的提出 最新的…

网工交换基础——生成树协议(01)

一、生成树的技术概述 1、技术背景 二层交换机网络的冗余性导致出现二层环路: 人为因素导致的二层环路问题: 二层环路带来的网络问题: 生成树协议的概念: STP(Spanning Tree Protocol)是生成树协议的英文缩写。该协议可应用于在网…

代码随想录算法训练营第三十七天| 738.单调递增的数字,968.监控二叉树

目录 题目链接:738.单调递增的数字 思路 代码 题目链接:968.监控二叉树 思路 代码 总结 题目链接:738.单调递增的数字 思路 既然是求单调递增的数字,要判断相邻数字之间的大小关系。有两种遍历顺序,从前往后和从…

面向对象练习坦克大兵游戏

游戏玩家(名称,生命值,等级),坦克,大兵类,玩家之间可以相互攻击,大兵拥有武器,用枪弹和反坦克炮弹,造成攻击不同,坦克攻击值固定,请设…

设计模式-六大原则

设计模式的六大原则是软件工程中的基本概念,使得构建可维护、可扩展和可重用的代码。 1.单一职责原则(Single Responsibility Principle):一个类或方法应该只有一个引起变化的原因,确保类或模块的功能高度内聚。 案例&…

VMware-Linux切换桥接模式上网教程(超详细)

这里写目录标题 1. 虚拟机关机2. VMware 虚拟网络配置2.1 检查是否存在 VMnet02.2 修改桥接模式2.3 修改Linux虚拟机网络适配器 3. Linux 系统配置3.1 修改系统网卡配置3.1.1 配置项含义解释3.1.2 查看物理机网络信息3.3.3 修改配置 3.2 重启服务 4. 测试网络连接情况5. 注意事…

如何看待AIGC技术?

AIGC原名(Artificial Intelligence Generated Content) 技术是一种利用人工智能来自动生成内容的技术,这包括文本、图像、音频和视频等多种形式的创作。AIGC技术的发展标志着人工智能从1.0时代进入2.0时代的重大转变,它不仅体现了…

多线程优化人脸识别时遇到的问题

项目: face 遇到的问题: 其中一个线程报错,然后不返回相应的数据信息 问题思考: 每个线程独立执行,当其中一个线程报错后,随之这个线程不往下执行,但是其他线程还是正确执行的。 解决&…

【SpringBoot整合系列】SpringBoot整合JPA

目录 前期回顾ORM解决方案 JPA简介JPA的组成技术ORM映射元数据Java持久化API查询语言(JPQL) JPA的优势JPA的缺点 Spring Data JPASpring Data JPA简介Spring Data 家族Spring Data JPA、JPA和其他框架之间的关系 SpringBoot整合JPAJPA的核心注解1.依赖2.…

element-ui upload 组件 手动多次出发 submit

element 上传组件 upload 上传成功以后,想重新 调用 submit()函数,发现是不可以进行多次触发的,。 直接上解决方法,在上传成功后的钩子函数里添加:fileList[0l.status ready fileList是文件列表,status是单文件的状态改成ready就…