專案需求：列表式切換商品，有時候上一次請求的結果非常慢，而我又點了另外一個商品，這時候第二次請求的介面比上一次快，那麼就點選第二次的商品看到的資訊卻是上一次的商品資訊，這樣的使用者體驗極其不好； 解決方案：在點選下一個商品的時候，將上一個商品請求的介面中斷取消請求。 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); } }) } }