CancelToken中断请求

最新推荐文章于 2024-09-02 09:25:07 发布

山谷里的杂货铺

最新推荐文章于 2024-09-02 09:25:07 发布

阅读量667

点赞数

文章标签：数学建模

本文链接：https://blog.youkuaiyun.com/weixin_58528200/article/details/131188430

版权

该代码示例展示了如何在Vue组件销毁前取消未完成的axios请求，避免因页面切换导致的多个请求同时进行。通过CancelToken的executor函数存储并取消请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用场景：页面切换时，主动取消掉未调用完成的接口

注意：因为测试，连续调用5次请求，正常情况下只用一次

<script>

import axios from 'axios';

//这里采用传递executor函数到CancelToken的构造函数来创建cancel token

const CancelToken = axios.CancelToken;

let cancel = []

export default{

beforDestory(){

if (cancel) {

cancel.forEach(item => {

console.log('item==', item)

item()

})

}

},

methods:{

getTableList (params = {}) {

this.loading = true

for (let i = 0; i < 5; i++) {

axios({

url: 'http://192.168.10.28:8301/system/sysOrg',

method: 'get',

cancelToken: new CancelToken(function executor (c) {

// executor 函数接收一个 cancel 函数作为参数

cancel.push(c);//存入请求方法

})

}).then(r => {

console.log('r======', r)

})

}

},

}
}

</s

cript>