终止基于axios
的未完成的http
请求
关键词:CancelToken
source
source.token
参考地址
应用场景:tab页频繁切换,页面的切换,用于终止正在挂起的请求
项目的如何应用
-
配置参数
axios({ method: 'post', url: url, withCredentials: false, params: params, data: data, cancelToken:data.cancelToken, headers: headerParam }).then(resp => { resolve(resp) }).catch(error => { reject(error) })
本项目中在调用请求那传入令牌
cancelToken:data.cancelToken
data为传入的参数 -
调用接口前,传入上一步需要的令牌
let CancelToken = this.axios.CancelToken; this.source = CancelToken.source(); data.cancelToken = this.source.token;
axios
在main.js
中挂载到了 实例中,data
data 为请求的参数,this.source
中有token
令牌和取消请求的cancel
方法 -
终止请求
cancelRequest(){ this.source.cancel("异常信息,选填") },
在发起新的请求的时候,执行一下
this.source.cancel()
即可终止正在挂起的请求。
以上只是对单个接口做了处理,如需要多个接口做处理可能比较复杂,觉得可以这么做试一下(针对页面切换的场景)
- 在
main.js
中挂载一个全局的数组$arr
,用来保存每个接口的source
- 在每个请求中保存
source
``$arr.push(source)` - 在路由守卫中
router.beforeEach
,遍历$arr
,执行每一个source
的cancel
方法,遍历完记得清空$arr