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

devtools/2024/9/24 16:01:43/

需求:从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.ppmy.cn/devtools/16524.html

相关文章

vscode中对 python 快速增加header 描述

在首选项→配置用户代码片段→python 然后再 Code/User/snippets/python.json文件中写入 {// Place your snippets for python here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the …

分享:9.3版本无缝导入AVEVA PDMS高版本工程12.0,12.1,E3D

9.3版本可以无缝导入AVEVA PDMS的工程。 UKP3d导入AVEVA PDMS工程的方法 http://47.94.91.234/forum.php?modviewthread&tid163583&fromuid6 (出处: 优易软件-工厂设计软件专家) (从AVEVA PDMS导出时元件和等级的功能我们正做收尾工作,到时可以…

MacOS通过命令行开启关闭向日葵远程控制的后台服务

categories: [Tips] tags: MacOS Tips 写在前面 经常有小伙伴问我电脑相关的问题, 而解决问题的一个重要途径就是远程了. 关于免费的远程工具我试过向日葵和 todesk, 并且主要使用向日葵, 虽然 MacOS 下要设置很多权限, 但是也不影响其丝滑的控制. 虽然用着舒服, 但是向日葵…

服务器排障(Linux,Windows)

一.计算机的启动流程 二.系统服务 三.运行级别 四.运行级别被修改 五.Root密码被遗忘 六.设置Grub密码 七.设置bios密码 一、计算机启动流程 1、bios加电自检 对计算机的硬件进行检测&a…

Swift - swiftc

文章目录 Swift - swiftcswiftc存放在Xcode内部一些操作 Swift - swiftc swiftc存放在Xcode内部 Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin 一些操作 生成语法树: swiftc -dump-ast main.swift生成最简洁的SIL代码: swiftc…

安全评估报告 项目安全风险评估报告 信息安全评估报告

一、安全评估报告的意义 安全评估报告是对特定环境、设施或系统安全性进行全 面分析、评估和预测的重要工具。它通过对潜在风险的识别、分析和评价,帮助决策者了解当前安全形势,制定科学的安全策略,从而有 效预防和减少安全事故的发生。安全…

【MHA】MySQL高可用MHA介绍4-故障监控与切换具体流程

目录 一 故障监控与切换 1 验证复制设置并识别当前主服务器 2 监控主服务器 3 检测主服务器故障 4 再次验证从服务器配置 5 关闭故障的主服务器(可选) 6 恢复新主服务器 6.1 保存来自 已崩溃主服务器的二进制日志事件(如果可能&#…

【Python系列】字符串操作

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…