🎃

AbortSignal.timeout()を使用してfetchAPIにタイムアウトを設定する

2023/08/01に公開

3件

AbortSignal.timeout()

AbortSignal.timeout()を使用することでfetchAPIにタイムアウトを設定できる。
タイムアウトを超過した時にfetchAPIはTimeoutErrorを返し、fetchAPIを中断することができる。

const response = await fetch("url", { signal: AbortSignal.timeout(5000) })

AbortController

上記のリンクを見ると、AbortSignal.timeout()に対応していないブラウザがある。
その場合はnew AbortController()でインスタンスを作成する。
その後setTimeoutを使用し、指定した時間後にAbortErrorを返し、fetchAPIを中断する。
ただし、asyncの中でsetTimeoutを使用すると挙動が変わることがあるので留意する。

const abortController = new AbortController()

// 5秒後にfetchAPIを中断する
const timeoutId = setTimeout(() => { abortController.abort() }, 5000)

const response = await fetch("url", { signal: abortController.signal })

参考リンク

Discussion

ゆうた

abortControllerと abortContoroller が混在しています。typoのようです。

t_tsuge

ご指摘ありがとうございます🙇

juner

asyncの中でsetTimeoutを使用すると挙動が変わることがあるので留意する。

とても気になります。
（queueMicrotask の件であるなら async/await に限らず Promise.prototype.then しまくれは遅延するので。