需求:搜索页做实时搜索时,选项卡多次切换后等功能。当执行相应的操作后,发现返回的数据是前面N个请求中的某个响应的数据。在回去一看接口,我尼玛,没错呀!
分析:因为axios请求是异步请求,当请求过快(操作过快)时返回的数据就无法确定是哪个请求(操作)之后响应的数据了。
解决:
axios取消请求-传送门
1,search.vue
import {CancelToken,isCancel} from 'axios'
export default{
data(){
return {
source:null
}
},
methods:{
// 取消请求
cancelQuest(){
console.log(this.source)
if(typeof this.source === 'function'){
this.source('终止请求');
}
},
search(){
that.cancelQuest(); // 先判断一下是否取消请求
that.$api.fixedGoodsListApi(
{cancelToken: new CancelToken(function executor(c) {that.source = c;})} // 主要的代码
)
.then( res => {
})
.catch( err => {
console.log(err)
if(isCancel(err)){
console.log(err)
}
});
}
}
}
2,request.js 请求类
export default{
dataRequest(url,data={},options={},method='post',contenttype='application/x-www-form-urlencoded'){
return new Promise((resolve,reject) =>{
axios({
url:url,
method:method,
data:qs.stringify(data),
headers:{
'Content-Type':contenttype,
'X-Requested-With':'XMLHttpRequest'
},
...options // 执行取消操作
})
.then( res => {
resolve(res.data)
})
.catch( res => {
reject(res)
})
})
}
}