今天公司的项目出了个bug----有一个标签页通过按钮点击发送请求不同数据,前一个请求结束之前点击另一个按钮 数据展示会出现问题 本该第一个接口返回渲染的数据出现在了第二个页面
解决办法:添加全局请求拦截器 在请求拦截器中加上取消请求标识 通过cancelToken方法中断未完成的请求 代码如下——
//-----在封装的axios请求的js文件中-----
window.axiosCancel = [] // 全局定义一个存放取消请求的标识
//在请求拦截器中加入取消请求标识
config.cancelToken = new axios.CancelToken(cancel => {
window.axiosCancel.push({
cancel
})
})
//-----在组件内的使用----------
//在methods中定义cancel方法
cancel(){
let cancelArr = window.axiosCancel;
cancelArr = cancelArr || [] //判断空值
cancelArr.forEach((ele, index) => {
ele.cancel("取消了请求") // 在失败函数中返回这里自定义的错误信息
delete window.axiosCancel[index]
})
},
//按钮点击事件
handleClick(){
//------调用请求中断方法-----
this.cancel()
//数据请求接口
getData().then(res =>{})
}
此文章旨在自己记录学习,方便日后查阅