当前位置: 首页 > news >正文

使用axios+vue在离开页面时中断网络请求

最近做到一个需求需要在离开页面时中断未完成的网络请求

第一步:

引入axios和CancelToken实例

import axios from 'axios'
const CancelToken = axios.CancelToken

第二步:在封装好的接口方法中加入cancelToken配置属性,并且传入this对象

export function getListWaveformDat(data,that){return request({url:'/vc/deviceItemData/listWaveformData',method:'post',timeout: 20000,data:data,cancelToken: new CancelToken((c) => {that.cancel = c})//加入的cancelToken属性})
}

 第三步:离开页面时出发取消请求的方法

beforeDestroy() {if(this.cancel){this.cancel();}},

 观察网络请求可以发现请求被取消了

 

相关文章:

  • MATLAB算法实战应用案例精讲-【数模应用】Turf组合模型(附MATLAB、python和R语言代码实现)
  • Outpainting Inpainting
  • RTA GMH系列 SERIE MOTION电机驱动板手侧 英文版
  • 【Web API DOM03】事件监听
  • VRRP
  • 创新指南|领导者如何评估自己的表现——麦肯锡专有的CEO卓越评估工具
  • 淘宝api接口是什么意思?api接口申请资格是什么?
  • echarts绘制三维柱状图
  • WordPress中借助Table of Contents Plus+Widget Options插件,实现仅在文章侧边栏显示文章目录的功能
  • Ubuntu server 24 (Linux) IPtables 双网卡 共享上网NAT 安装配置DHCP
  • Lambda 表达式练习
  • iOS hitTest 机制用处之二-----使用pointInside方法
  • Flutter 中的 SliverCrossAxisExpanded 小部件:全面指南
  • 零基础入门篇①⑥ Python可变序列类型--字典
  • Webrtc支持HEVC之FFMPEG支持HEVC编解码(一)
  • 【Linux系统编程】快速查找errno错误码信息
  • 【译】React性能工程(下) -- 深入研究React性能调试
  • 【跃迁之路】【641天】程序员高效学习方法论探索系列(实验阶段398-2018.11.14)...
  • Android单元测试 - 几个重要问题
  • bearychat的java client
  • ComponentOne 2017 V2版本正式发布
  • ES6简单总结(搭配简单的讲解和小案例)
  • JavaScript 奇技淫巧
  • Less 日常用法
  • oldjun 检测网站的经验
  • Sequelize 中文文档 v4 - Getting started - 入门
  • 创建一种深思熟虑的文化
  • 从tcpdump抓包看TCP/IP协议
  • 分类模型——Logistics Regression
  • 关于 Cirru Editor 存储格式
  • 解析 Webpack中import、require、按需加载的执行过程
  • 蓝海存储开关机注意事项总结
  • 利用jquery编写加法运算验证码
  • 使用 Node.js 的 nodemailer 模块发送邮件(支持 QQ、163 等、支持附件)
  • 算法之不定期更新(一)(2018-04-12)
  • 通过npm或yarn自动生成vue组件
  • 用Node EJS写一个爬虫脚本每天定时给心爱的她发一封暖心邮件
  • Semaphore
  • #LLM入门|Prompt#1.7_文本拓展_Expanding
  • (1)(1.13) SiK无线电高级配置(五)
  • (C#)if (this == null)?你在逗我,this 怎么可能为 null!用 IL 编译和反编译看穿一切
  • (附源码)php投票系统 毕业设计 121500
  • (紀錄)[ASP.NET MVC][jQuery]-2 純手工打造屬於自己的 jQuery GridView (含完整程式碼下載)...
  • (三)mysql_MYSQL(三)
  • (学习日记)2024.01.19
  • (原創) X61用戶,小心你的上蓋!! (NB) (ThinkPad) (X61)
  • (转)C#开发微信门户及应用(1)--开始使用微信接口
  • (转)EOS中账户、钱包和密钥的关系
  • (转载)Linux网络编程入门
  • .equals()到底是什么意思?
  • .NET 8.0 发布到 IIS
  • .NET Core MongoDB数据仓储和工作单元模式封装
  • .NET Core 将实体类转换为 SQL(ORM 映射)
  • .NetCore项目nginx发布
  • .pop ----remove 删除