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

本文主要是介绍使用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();}},

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

 

这篇关于使用axios+vue在离开页面时中断网络请求的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---