近日在優化網站非同步的 api 存取。
當換頁或 component 被銷毀時，取消 api 的請求。發現以往 CancelToken 的做法已經不再被 axios 官方推薦。
參考連結： https://axios-http.com/docs/cancellation
取代的做法是 AbortController。 以下是官方範例：
const controller = new AbortController();
axios.get('/foo/bar', {
signal: controller.signal
}).then(function(response) {
//...
});
// cancel the request
controller.abort()
比起前一版的寫法確實友善許多。
如果要同時解除多個請求，只要共用同一個 controller 就可以做到
const controller = new AbortController();
axios.get('/foo/bar_1', {
signal: controller.signal
}).then(function(response) {
//...
});
axios.get('/foo/bar_2', {
signal: controller.signal
}).then(function(response) {
//...
});
// cancel the request
// 兩個請求共用一個 controller ，所以兩個請求都會被取消
controller.abort()
也可以用在 js 原生的 fetch
const controller = new AbortController();
const signal = controller.signal;
fetch('/users', {
method: 'get',
signal: signal
}).then(function(response) {
// handle response
}).catch(function(error) {
if (error.name === 'AbortError') {
console.log('Fetch aborted');
} else {
// handle other errors
}
});
// later on
controller.abort();
