vue手动中断axios请求
描述:在我们使用axios请求时,如果接口请求过慢,我们在发第二次请求时,成功,从接口获取到的值回显在页面上,此时第一次请求的接口如果成功会覆盖掉第一次的结果,所以我们要在发相同的接口时,中断掉上一次的接口
解决方案:
1.全局挂载一个$httpRequestList,初始值为空数组
Vue.$httpRequestList = [] // 在 main.js文件中挂载
2.请求拦截 中配置CancelToken
//http request拦截
axios.interceptors.request.use(
config => {
const meta = config.meta || {}
const isToken = meta.isToken === false
config.headers['Authorization'] = `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`
// 添加断开请求的方法---------------------这里为重点-----------------------------
config['cancelToken'] = new axios.CancelToken(function executor(cancel) {
Vue.$httpRequestList.push(cancel) //存储cancle
})
//让每个请求携带token
if (getToken() && !isToken) {
config.headers[website.tokenHeader] = 'bearer ' + getToken()
}
//headers中配置text请求
if (config.text === true) {
config.headers['Content-Type'] = 'text/plain'
}
//headers中配置serialize为true开启序列化
if (config.method === 'post' && meta.isSerialize === true) {
config.data = serialize(config.data)
}
return config
},
error => {
return Promise.reject(error)
}
)
3.utils中定义全局方法, 在需要中断的时候调用
/**
* 中断请求方法
*/
clearHttpRequestingList() {
// 判断是否有存储的cancle
if (Vue.$httpRequestList.length > 0) {
Vue.$httpRequestList.forEach(item => {
// 给个标志,中断请求
item('interrupt')
})
Vue.$httpRequestList = []
}
}
4.使用时调用方法
// 再次点击详情时中断之前的详情请求,防止数据被之前接口数据所覆盖·
this.$utils.clearHttpRequestingList()