🎃
AbortSignal.timeout()を使用してfetchAPIにタイムアウトを設定する
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(() => { abortContoroller.abort() }, 5000)
const response = await fetch("url", { signal: abortController.signal })
参考リンク
Discussion