vue.js學習筆記(五)--axios中取消請求
阿新 • • 發佈:2018-11-06
在平時的開發過程中,我們會經常遇到選單切換的問題,在一些切換頻率較低的情況下,在切換到另一個頁面的時候,上一個頁面基本沒有未完成的非同步請求,即時有,在一些情況下也是可以忽略的。但是,在一些切換頻率較高的頁面中,如果我們不處理這些未完成的請求,那麼這些請求會極大的影響頁面的效能,甚至導致之後的請求超時。
如果需要斷開Javascript的ajax請求,一種是通過設定時間,超時自動斷開,另一種我們可以呼叫XMLHttpRequest物件上的abort方法。
在使用Vue的過程中,大多是使用axios來發起http請求,那麼在axios中我們要怎麼中止某個http請求呢?遍尋網上教程無果後,想起了革命先輩的名言–自己動手,豐衣足食。好了,我要秀英語水平了,那麼我們只好自己看英文文件了。開啟 axios的github主頁,果然文件才是我們的好幫手,很快就找到解決問題的辦法。
You can cancel a request using a cancel token.
The axios cancel token API is based on the withdrawn cancelable promises proposal.
You can create a cancel token using the CancelToken.source factory as shown below:
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// handle error
}
});
// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.' );
查詢axios的文件,發現可以通過使用CancelToken來取消axios發起的請求,我們可以自己寫一段程式碼來驗證。
var app = new Vue({
el: '#app',
data: {
message: 'Hello Axios!',
source: null
},
methods: {
sendRequest() {
this.source = this.axios.CancelToken.source(); // 這裡初始化source物件
this.axios.get(url, {
cancelToken: this.source.token // 這裡宣告的cancelToken其實相當於是一個標記,
// 當我們要取消請求的時候,可以通過這個找到該請求
})
.then(res => {
// 你的邏輯
})
.catch(res => {
// 如果呼叫了cancel方法,那麼這裡的res就是cancel傳入的資訊
// 你的邏輯
})
},
cancel() {
this.source.cancel('這裡你可以輸出一些資訊,可以在catch中拿到')
}
}
})