AbortController fetch の中断

AbortController は、1 つまたは複数の 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 を第 2 引数として受け入れます：

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 was aborted')
    } else {
      console.log('Error', err)
    }
  })

// 2秒後にリクエストを中断し、'AbortError' をトリガーします
setTimeout(() => controller.abort(), 2000)

axios での使用方法#

const controller = new AbortController()

axios
  .get('/foo/bar', {
    signal: controller.signal,
  })
  .then(function (response) {
    //...
  })
// 現在のリクエストをキャンセルする
controller.abort()