axios取消上一次请求

项目需求：列表式切换商品，有时候上一次请求的结果非常慢，而我又点了另外一个商品，这时候第二次请求的接口比上一次快，那么就点击第二次的商品看到的信息却是上一次的商品信息，这样的用户体验极其不好；
解决方案：在点击下一个商品的时候，将上一个商品请求的接口中断取消请求。
axios官网给出了取消请求的方法：

方法一：
axios.get(’/user/12345’, {
cancelToken: axios.CancelToken.source().token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log(‘Request canceled’, thrown.message);
} else {
// handle error
}
});

axios.post(’/user/12345’, {
name: ‘new name’
}, {
cancelToken: axios.CancelToken.source().token
})

// cancel the request (the message parameter is optional)
source.cancel(‘Operation canceled by the user.’);

方法二：
let cancel;
axios.get(’/user/12345’, {
cancelToken: new axios.CancelToken(function executor© {
// An executor function receives a cancel function as a parameter
cancel = c;
})
});

// cancel the request
cancel();
1
2
3
4
5
6
7
8
9
10
11
根据项目需求给出解决方案：

vue：
data(){
return{
source: null, //存放取消的请求方法
}
},
methods:{
cancelQuest(){
if(typeof this.source ===‘function’){
this.source(‘终止请求’); //取消请求
}
},
getInfo(id){
const _this = this;
this.cancelQuest(); //在请求发出前取消上一次未完成的请求；
//发送请求
this.axios.get(/markets/tradeInfo/${id}?top=40,{
cancelToken: new this.axios.CancelToken(function executor© {
_this.source = c;
})
}).then(res =>{
//handle result
}).catch(error => {
if (this.axios.isCancel(err)) {
console.log(‘Rquest canceled’, err.message); //请求如果被取消，这里是返回取消的message
} else {
//handle error
console.log(err);
}
})
}
}