中斷 fetch 的 AbortController

AbortController 可以用來中斷一個或多個 Web 請求。

基礎用法#

// 創建 AbortController 的實例
const controller = new AbortController()
const signal = controller.signal

// 監聽 abort 事件，在 controller.abort() 執行後執行回調打印
signal.addEventListener('abort', () => {
  console.log(signal.aborted) // true
})

// 觸發中斷
controller.abort()

演示#

fetch 接受 AbortSignal 作為第二個參數的一部分：

const controller = new AbortController()
const signal = controller.signal

fetch('https://slowmo.glitch.me/5000', { signal })
  .then((r) => r.json())
  .then((response) => console.log(response))
  .catch((err) => {
    if (err.name === 'AbortError') {
      console.log('Fetch 被中斷')
    } else {
      console.log('錯誤', err)
    }
  })

// 在 2s 後中斷請求，將觸發 'AbortError'
setTimeout(() => controller.abort(), 2000)

axios 中使用#

const controller = new AbortController()

axios
  .get('/foo/bar', {
    signal: controller.signal,
  })
  .then(function (response) {
    //...
  })
// 取消當前請求
controller.abort()