axios怎么中断请求,axios简单请求和复杂请求
在项目中，经常会出现多个请求会被连续发送的场景，异步会导致最终的结果不是我们想要的，也会对性能产生很大的影响。本文主要介绍axios取消请求和避免重复请求的相关信息。有需要的可以参考一下。
目录
产地
现状
取消取消令牌的请求
修改的请求方法
避免重复请求。
摘要
起源
某个页面需要下载所有数据的功能，导致下载数据量大，界面延迟长。
页面上加载的初始数据量很长，但单次检索很快。加载初始数据时，检索界面返回，后续初始数据的返回覆盖了检索数据的显示。
这些情况要求我们：
可以手动取消/终止请求。
一些页面接口一次只能有一个请求。
现状
系统基于vue-element-admin的二次开发，vue-element-admin是老歌华裤衩的开源，其中request是axios，封装request.js的关键代码如下：
//创建axios实例
const service=axios.create({
BASE url:process . env . vue _ APP _ BASE _ API，//url=基本URL请求URL
withCredentials: true，//跨域请求时发送cookies
超时：500000，//请求超时
transform request:[函数(数据){
//对数据进行任意转换处理。
return Qs.stringify({
.数据
},
//数组的转换
{ arrayFormat:括号 })
}]
})
//请求拦截器
service . interceptors . request . use(
配置={
//在发送请求之前做一些事情
if (store.getters.token) {
//让每个请求携带令牌
//[X-Token]是一个自定义头键
//请根据实际情况修改
config . headers[ token ]=getToken()
}
返回配置
},
错误={
//对请求错误做些什么
console.log(错误)//用于调试
退货承诺.拒绝(错误)
}
)
发起请求的方法：
导出函数remoteApi(数据){
退货请求({
URL:“/API”，
方法： post ，
数据
})
}
取消请求 cancelToken
其正式文件：取消：
const CancelToken=axios。CancelToken
const source=cancel token . source()；
axios.get(/user/12345 ，{
cancelToken: source.token
}).catch(函数(抛出){
if (axios.isCancel(thrown)) {
console.log(请求已取消，thrown . message)；
}否则{
//处理错误
}
});
axios.post(/user/12345 ，{
名称：“新名称”
}, {
cancelToken: source.token
})
//取消请求(message参数是可选的)
source.cancel(用户取消了操作。);
修改后的请求方法
导出函数remoteApi(data，cancelToken) {
退货请求({
URL:“/API”，
方法： post ，
取消Token，
数据
})
}
当实际被请求时，创建cacelToken:
//在组件方法内
this . cancel token=cancel token . source()
remoreApi(data，this.cancelToken)。然后(.).接住(.).最后(.)
当您需要取消请求时，执行：
//在组件方法内
This.cancelToken.cancel(“取消下载”)
避免重复请求
避免一个接口重复请求，以免延迟长的接口返回的数据覆盖另一个接口返回的数据，造成数据显示错误。这个想法也相对简单，使用一个全局映射来存储请求ID和相应的cancelToken。请求，在发起请求之前，根据请求标识符，调用cancelToken对应的cancel方法，然后发出新的满足条件的请求。
总结
这就是这篇关于axios取消请求和避免重复请求的文章。有关axios取消请求的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。