欣迪

近日在優化網站非同步的 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();

訂閱 IT-Monk

訂閱最新文章的發布消息! 😚😚😚
Loading

作者介紹 - 欣迪

欣迪

從設計到寫程式,發現自己有追求前端技巧的自虐傾向。不斷的踩坑,再從坑裡爬出來,慢慢對攀岩有點心得。 目前在多間公司擔任網站設計顧問。 同時也是網站架設公司負責人。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *