JavaScriptのAbortControllerは使い回すべきではなさそう
#AbortController #JavaScript #fetch
JavaScripitのfetch()を中断させた時などに使うAbortControllerは使い回すべきではなさそうなことが分かった。
なんとなくそのような気がしていたがちゃんと試した。
一度abort()したAbortControllerは中断したという状態を保持し続けるような実装になっているように見える。
他の実装の可能性としてEventTargetのようにイベントが発生した瞬間に中断が発生するようなことがありえると思うがそうではなさそう。
検証コード
code:js
(async () => {
const abortCtrl = new AbortController();
const signal = abortCtrl.signal;
const url = "https://gist.githubusercontent.com/nwtgck/776914c39cf6143c7c7be18ab97f1b7e/raw/e174f2af807b5aae7e44651a9db629bc64bb70eb/image-test.jpg";
try {
const resPromise = fetch(url, {signal});
abortCtrl.abort();
const res = await resPromise;
console.log('not aborted', await res.text())
} catch (e) {
console.log('aborted (1)', e)
}
try {
const resPromise = fetch(url, {signal});
// NOTE: NOT abort
// abortCtrl.abort();
const res = await resPromise;
console.log('not aborted', await res.text())
} catch (e) {
console.log('aborted (2)', e)
}
})();
code:出力
aborted (1) DOMException: The user aborted a request.
aborted (2) DOMException: The user aborted a request.
この結果からわかることは、上記のの検証コードでは、
一回のtry{}内でabortCtrl.abort()していて、想定どおり"aborted (1)"は表示される。
二回めtry{}内ではabortCtrl.abort()していないが、"aborted (2)"と表示され中断する。
Nipp: