From d893d523338b1710c22c053b79b44ff48eee1a5f Mon Sep 17 00:00:00 2001 From: marcindz88 Date: Sat, 6 Sep 2025 16:07:34 +0200 Subject: [PATCH 1/4] Fix AbortController being reused in multiple fetch requests in some of the examples --- .../web/api/abortcontroller/abort/index.md | 30 +++++++++++-------- .../abortcontroller/abortcontroller/index.md | 30 +++++++++++-------- .../web/api/abortcontroller/signal/index.md | 30 +++++++++++-------- 3 files changed, 51 insertions(+), 39 deletions(-) diff --git a/files/en-us/web/api/abortcontroller/abort/index.md b/files/en-us/web/api/abortcontroller/abort/index.md index b7cda1780e4928e..66031a32f5105c1 100644 --- a/files/en-us/web/api/abortcontroller/abort/index.md +++ b/files/en-us/web/api/abortcontroller/abort/index.md @@ -37,28 +37,32 @@ We first create a controller using the {{domxref("AbortController.AbortControlle When the [fetch request](/en-US/docs/Web/API/Window/fetch) is initiated, we pass in the `AbortSignal` as an option inside the request's options object (the `{signal}` below). This associates the signal and controller with the fetch request and allows us to abort it by calling `AbortController.abort()`, as seen below in the second event listener. ```js -const controller = new AbortController(); -const signal = controller.signal; - +let controller; const url = "video.mp4"; + const downloadBtn = document.querySelector(".download"); const abortBtn = document.querySelector(".abort"); downloadBtn.addEventListener("click", fetchVideo); abortBtn.addEventListener("click", () => { - controller.abort(); - console.log("Download aborted"); + if (controller) { + controller.abort(); + console.log("Download aborted"); + } }); -function fetchVideo() { - fetch(url, { signal }) - .then((response) => { - console.log("Download complete", response); - }) - .catch((err) => { - console.error(`Download error: ${err.message}`); - }); +async function fetchVideo() { + controller = new AbortController(); + const signal = controller.signal; + + try { + const response = await fetch(url, { signal }); + console.log("Download complete", response); + // process response further + } catch (err) { + console.error(`Download error: ${err.message}`); + } } ``` diff --git a/files/en-us/web/api/abortcontroller/abortcontroller/index.md b/files/en-us/web/api/abortcontroller/abortcontroller/index.md index 69b4bcb3fdf702d..95fc573b9100086 100644 --- a/files/en-us/web/api/abortcontroller/abortcontroller/index.md +++ b/files/en-us/web/api/abortcontroller/abortcontroller/index.md @@ -29,28 +29,32 @@ We first create a controller using the `AbortController()` constructor, then gra When the [fetch request](/en-US/docs/Web/API/Window/fetch) is initiated, we pass in the `AbortSignal` as an option inside the request's options object (the `{ signal }` below). This associates the signal and controller with the fetch request and allows us to abort it by calling {{domxref("AbortController.abort()")}}, as seen below in the second event listener. ```js -const controller = new AbortController(); -const signal = controller.signal; - +let controller; const url = "video.mp4"; + const downloadBtn = document.querySelector(".download"); const abortBtn = document.querySelector(".abort"); downloadBtn.addEventListener("click", fetchVideo); abortBtn.addEventListener("click", () => { - controller.abort(); - console.log("Download aborted"); + if (controller) { + controller.abort(); + console.log("Download aborted"); + } }); -function fetchVideo() { - fetch(url, { signal }) - .then((response) => { - console.log("Download complete", response); - }) - .catch((err) => { - console.error(`Download error: ${err.message}`); - }); +async function fetchVideo() { + controller = new AbortController(); + const signal = controller.signal; + + try { + const response = await fetch(url, { signal }); + console.log("Download complete", response); + // process response further + } catch (err) { + console.error(`Download error: ${err.message}`); + } } ``` diff --git a/files/en-us/web/api/abortcontroller/signal/index.md b/files/en-us/web/api/abortcontroller/signal/index.md index 4c43fb52aa2ae8e..92a819d236f3cb9 100644 --- a/files/en-us/web/api/abortcontroller/signal/index.md +++ b/files/en-us/web/api/abortcontroller/signal/index.md @@ -23,28 +23,32 @@ We first create a controller using the {{domxref("AbortController.AbortControlle When the [fetch request](/en-US/docs/Web/API/Window/fetch) is initiated, we pass in the `AbortSignal` as an option inside the request's options object (the `{signal}` below). This associates the signal and controller with the fetch request and allows us to abort it by calling {{domxref("AbortController.abort()")}}, as seen below in the second event listener. ```js -const controller = new AbortController(); -const signal = controller.signal; - +let controller; const url = "video.mp4"; + const downloadBtn = document.querySelector(".download"); const abortBtn = document.querySelector(".abort"); downloadBtn.addEventListener("click", fetchVideo); abortBtn.addEventListener("click", () => { - controller.abort(); - console.log("Download aborted"); + if (controller) { + controller.abort(); + console.log("Download aborted"); + } }); -function fetchVideo() { - fetch(url, { signal }) - .then((response) => { - console.log("Download complete", response); - }) - .catch((err) => { - console.error(`Download error: ${err.message}`); - }); +async function fetchVideo() { + controller = new AbortController(); + const signal = controller.signal; + + try { + const response = await fetch(url, { signal }); + console.log("Download complete", response); + // process response further + } catch (err) { + console.error(`Download error: ${err.message}`); + } } ``` From b10fe48efdc7cb327806fb332f0f13ecd3fb89e6 Mon Sep 17 00:00:00 2001 From: marcindz88 Date: Wed, 10 Sep 2025 16:51:23 +0200 Subject: [PATCH 2/4] Update AbortController example description after adding new instance for every fetch --- files/en-us/web/api/abortcontroller/abort/index.md | 11 +++++++++-- .../web/api/abortcontroller/abortcontroller/index.md | 11 +++++++++-- files/en-us/web/api/abortcontroller/index.md | 7 ++++++- files/en-us/web/api/abortcontroller/signal/index.md | 9 ++++++++- 4 files changed, 32 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/api/abortcontroller/abort/index.md b/files/en-us/web/api/abortcontroller/abort/index.md index 66031a32f5105c1..8612b5ff31e653f 100644 --- a/files/en-us/web/api/abortcontroller/abort/index.md +++ b/files/en-us/web/api/abortcontroller/abort/index.md @@ -32,9 +32,16 @@ None ({{jsxref("undefined")}}). In the following snippet, we aim to download a video using the [Fetch API](/en-US/docs/Web/API/Fetch_API). -We first create a controller using the {{domxref("AbortController.AbortController","AbortController()")}} constructor, then grab a reference to its associated {{domxref("AbortSignal")}} object using the {{domxref("AbortController.signal")}} property. +We first define a variable for our `AbortController`. -When the [fetch request](/en-US/docs/Web/API/Window/fetch) is initiated, we pass in the `AbortSignal` as an option inside the request's options object (the `{signal}` below). This associates the signal and controller with the fetch request and allows us to abort it by calling `AbortController.abort()`, as seen below in the second event listener. +Before each [fetch request](/en-US/docs/Web/API/Window/fetch) we create new instance of controller using the {{domxref("AbortController.AbortController","AbortController()")}} constructor, then grab a reference to its associated {{domxref("AbortSignal")}} object using the {{domxref("AbortController.signal")}} property. + +> [!NOTE] +> An `AbortSignal` can only be used once. After it is aborted, any fetch call using the same signal will be immediately rejected with a `DOMException` named `AbortError`. + +When the [fetch request](/en-US/docs/Web/API/Window/fetch) is initiated, we pass in the `AbortSignal` as an option inside the request's options object (the `{signal}` below). This associates the signal and controller with the fetch request and allows us to abort it by calling {{domxref("AbortController.abort()")}}, as seen below in the second event listener. + +When `abort()` is called, the `fetch()` promise rejects with a `DOMException` named `AbortError`. ```js let controller; diff --git a/files/en-us/web/api/abortcontroller/abortcontroller/index.md b/files/en-us/web/api/abortcontroller/abortcontroller/index.md index 95fc573b9100086..358fdd29b45a060 100644 --- a/files/en-us/web/api/abortcontroller/abortcontroller/index.md +++ b/files/en-us/web/api/abortcontroller/abortcontroller/index.md @@ -24,9 +24,16 @@ None. In the following snippet, we aim to download a video using the [Fetch API](/en-US/docs/Web/API/Fetch_API). -We first create a controller using the `AbortController()` constructor, then grab a reference to its associated {{domxref("AbortSignal")}} object using the {{domxref("AbortController.signal")}} property. +We first define a variable for our `AbortController`. -When the [fetch request](/en-US/docs/Web/API/Window/fetch) is initiated, we pass in the `AbortSignal` as an option inside the request's options object (the `{ signal }` below). This associates the signal and controller with the fetch request and allows us to abort it by calling {{domxref("AbortController.abort()")}}, as seen below in the second event listener. +Before each [fetch request](/en-US/docs/Web/API/Window/fetch) we create new instance of controller using the {{domxref("AbortController.AbortController","AbortController()")}} constructor, then grab a reference to its associated {{domxref("AbortSignal")}} object using the {{domxref("AbortController.signal")}} property. + +> [!NOTE] +> An `AbortSignal` can only be used once. After it is aborted, any fetch call using the same signal will be immediately rejected with a `DOMException` named `AbortError`. + +When the [fetch request](/en-US/docs/Web/API/Window/fetch) is initiated, we pass in the `AbortSignal` as an option inside the request's options object (the `{signal}` below). This associates the signal and controller with the fetch request and allows us to abort it by calling {{domxref("AbortController.abort()")}}, as seen below in the second event listener. + +When `abort()` is called, the `fetch()` promise rejects with a `DOMException` named `AbortError`. ```js let controller; diff --git a/files/en-us/web/api/abortcontroller/index.md b/files/en-us/web/api/abortcontroller/index.md index 9824cb869ed8db8..c4895636acd5e57 100644 --- a/files/en-us/web/api/abortcontroller/index.md +++ b/files/en-us/web/api/abortcontroller/index.md @@ -33,7 +33,12 @@ You can create a new `AbortController` object using the {{domxref("AbortControll In the following snippet, we aim to download a video using the [Fetch API](/en-US/docs/Web/API/Fetch_API). -We first create a controller using the {{domxref("AbortController.AbortController","AbortController()")}} constructor, then grab a reference to its associated {{domxref("AbortSignal")}} object using the {{domxref("AbortController.signal")}} property. +We first define a variable for our `AbortController`. + +Before each [fetch request](/en-US/docs/Web/API/Window/fetch) we create new instance of controller using the {{domxref("AbortController.AbortController","AbortController()")}} constructor, then grab a reference to its associated {{domxref("AbortSignal")}} object using the {{domxref("AbortController.signal")}} property. + +> [!NOTE] +> An `AbortSignal` can only be used once. After it is aborted, any fetch call using the same signal will be immediately rejected with a `DOMException` named `AbortError`. When the [fetch request](/en-US/docs/Web/API/Window/fetch) is initiated, we pass in the `AbortSignal` as an option inside the request's options object (the `{signal}` below). This associates the signal and controller with the fetch request and allows us to abort it by calling {{domxref("AbortController.abort()")}}, as seen below in the second event listener. diff --git a/files/en-us/web/api/abortcontroller/signal/index.md b/files/en-us/web/api/abortcontroller/signal/index.md index 92a819d236f3cb9..6cf0edcd64894c5 100644 --- a/files/en-us/web/api/abortcontroller/signal/index.md +++ b/files/en-us/web/api/abortcontroller/signal/index.md @@ -18,10 +18,17 @@ An {{domxref("AbortSignal")}} object instance. In the following snippet, we aim to download a video using the [Fetch API](/en-US/docs/Web/API/Fetch_API). -We first create a controller using the {{domxref("AbortController.AbortController","AbortController()")}} constructor, then grab a reference to its associated {{domxref("AbortSignal")}} object using the `AbortController.signal` property. +We first define a variable for our `AbortController`. + +Before each [fetch request](/en-US/docs/Web/API/Window/fetch) we create new instance of controller using the {{domxref("AbortController.AbortController","AbortController()")}} constructor, then grab a reference to its associated {{domxref("AbortSignal")}} object using the {{domxref("AbortController.signal")}} property. + +> [!NOTE] +> An `AbortSignal` can only be used once. After it is aborted, any fetch call using the same signal will be immediately rejected with a `DOMException` named `AbortError`. When the [fetch request](/en-US/docs/Web/API/Window/fetch) is initiated, we pass in the `AbortSignal` as an option inside the request's options object (the `{signal}` below). This associates the signal and controller with the fetch request and allows us to abort it by calling {{domxref("AbortController.abort()")}}, as seen below in the second event listener. +When `abort()` is called, the `fetch()` promise rejects with a `DOMException` named `AbortError`. + ```js let controller; const url = "video.mp4"; From 65f3a72eea44ed2a3afd320dddfffa447c6242a3 Mon Sep 17 00:00:00 2001 From: marcindz88 Date: Wed, 10 Sep 2025 19:15:03 +0200 Subject: [PATCH 3/4] Remove duplicated examples of AbortController and redirect to AbortSignal for examples --- .../web/api/abortcontroller/abort/index.md | 46 +------------- .../abortcontroller/abortcontroller/index.md | 46 +------------- files/en-us/web/api/abortcontroller/index.md | 63 +------------------ .../web/api/abortcontroller/signal/index.md | 46 +------------- files/en-us/web/api/abortsignal/index.md | 10 ++- 5 files changed, 11 insertions(+), 200 deletions(-) diff --git a/files/en-us/web/api/abortcontroller/abort/index.md b/files/en-us/web/api/abortcontroller/abort/index.md index 8612b5ff31e653f..f3afef8968ca092 100644 --- a/files/en-us/web/api/abortcontroller/abort/index.md +++ b/files/en-us/web/api/abortcontroller/abort/index.md @@ -30,51 +30,7 @@ None ({{jsxref("undefined")}}). ## Examples -In the following snippet, we aim to download a video using the [Fetch API](/en-US/docs/Web/API/Fetch_API). - -We first define a variable for our `AbortController`. - -Before each [fetch request](/en-US/docs/Web/API/Window/fetch) we create new instance of controller using the {{domxref("AbortController.AbortController","AbortController()")}} constructor, then grab a reference to its associated {{domxref("AbortSignal")}} object using the {{domxref("AbortController.signal")}} property. - -> [!NOTE] -> An `AbortSignal` can only be used once. After it is aborted, any fetch call using the same signal will be immediately rejected with a `DOMException` named `AbortError`. - -When the [fetch request](/en-US/docs/Web/API/Window/fetch) is initiated, we pass in the `AbortSignal` as an option inside the request's options object (the `{signal}` below). This associates the signal and controller with the fetch request and allows us to abort it by calling {{domxref("AbortController.abort()")}}, as seen below in the second event listener. - -When `abort()` is called, the `fetch()` promise rejects with a `DOMException` named `AbortError`. - -```js -let controller; -const url = "video.mp4"; - -const downloadBtn = document.querySelector(".download"); -const abortBtn = document.querySelector(".abort"); - -downloadBtn.addEventListener("click", fetchVideo); - -abortBtn.addEventListener("click", () => { - if (controller) { - controller.abort(); - console.log("Download aborted"); - } -}); - -async function fetchVideo() { - controller = new AbortController(); - const signal = controller.signal; - - try { - const response = await fetch(url, { signal }); - console.log("Download complete", response); - // process response further - } catch (err) { - console.error(`Download error: ${err.message}`); - } -} -``` - -> [!NOTE] -> When `abort()` is called, the `fetch()` promise rejects with an `Error` of type `DOMException`, with name `AbortError`. +See the [`AbortSignal` page](/en-US/docs/Web/API/AbortSignal#examples) for usage examples. You can find a [full working example on GitHub](https://github.com/mdn/dom-examples/tree/main/abort-api); you can also see it [running live](https://mdn.github.io/dom-examples/abort-api/). diff --git a/files/en-us/web/api/abortcontroller/abortcontroller/index.md b/files/en-us/web/api/abortcontroller/abortcontroller/index.md index 358fdd29b45a060..241161230754286 100644 --- a/files/en-us/web/api/abortcontroller/abortcontroller/index.md +++ b/files/en-us/web/api/abortcontroller/abortcontroller/index.md @@ -22,51 +22,7 @@ None. ## Examples -In the following snippet, we aim to download a video using the [Fetch API](/en-US/docs/Web/API/Fetch_API). - -We first define a variable for our `AbortController`. - -Before each [fetch request](/en-US/docs/Web/API/Window/fetch) we create new instance of controller using the {{domxref("AbortController.AbortController","AbortController()")}} constructor, then grab a reference to its associated {{domxref("AbortSignal")}} object using the {{domxref("AbortController.signal")}} property. - -> [!NOTE] -> An `AbortSignal` can only be used once. After it is aborted, any fetch call using the same signal will be immediately rejected with a `DOMException` named `AbortError`. - -When the [fetch request](/en-US/docs/Web/API/Window/fetch) is initiated, we pass in the `AbortSignal` as an option inside the request's options object (the `{signal}` below). This associates the signal and controller with the fetch request and allows us to abort it by calling {{domxref("AbortController.abort()")}}, as seen below in the second event listener. - -When `abort()` is called, the `fetch()` promise rejects with a `DOMException` named `AbortError`. - -```js -let controller; -const url = "video.mp4"; - -const downloadBtn = document.querySelector(".download"); -const abortBtn = document.querySelector(".abort"); - -downloadBtn.addEventListener("click", fetchVideo); - -abortBtn.addEventListener("click", () => { - if (controller) { - controller.abort(); - console.log("Download aborted"); - } -}); - -async function fetchVideo() { - controller = new AbortController(); - const signal = controller.signal; - - try { - const response = await fetch(url, { signal }); - console.log("Download complete", response); - // process response further - } catch (err) { - console.error(`Download error: ${err.message}`); - } -} -``` - -> [!NOTE] -> When `abort()` is called, the `fetch()` promise rejects with an `AbortError`. +See the [`AbortSignal` page](/en-US/docs/Web/API/AbortSignal#examples) for usage examples. You can find a [full working example on GitHub](https://github.com/mdn/dom-examples/tree/main/abort-api); you can also see it [running live](https://mdn.github.io/dom-examples/abort-api/). diff --git a/files/en-us/web/api/abortcontroller/index.md b/files/en-us/web/api/abortcontroller/index.md index c4895636acd5e57..30baaf6f4523e3a 100644 --- a/files/en-us/web/api/abortcontroller/index.md +++ b/files/en-us/web/api/abortcontroller/index.md @@ -28,68 +28,7 @@ You can create a new `AbortController` object using the {{domxref("AbortControll ## Examples -> [!NOTE] -> There are additional examples in the {{domxref("AbortSignal")}} reference. - -In the following snippet, we aim to download a video using the [Fetch API](/en-US/docs/Web/API/Fetch_API). - -We first define a variable for our `AbortController`. - -Before each [fetch request](/en-US/docs/Web/API/Window/fetch) we create new instance of controller using the {{domxref("AbortController.AbortController","AbortController()")}} constructor, then grab a reference to its associated {{domxref("AbortSignal")}} object using the {{domxref("AbortController.signal")}} property. - -> [!NOTE] -> An `AbortSignal` can only be used once. After it is aborted, any fetch call using the same signal will be immediately rejected with a `DOMException` named `AbortError`. - -When the [fetch request](/en-US/docs/Web/API/Window/fetch) is initiated, we pass in the `AbortSignal` as an option inside the request's options object (the `{signal}` below). This associates the signal and controller with the fetch request and allows us to abort it by calling {{domxref("AbortController.abort()")}}, as seen below in the second event listener. - -When `abort()` is called, the `fetch()` promise rejects with a `DOMException` named `AbortError`. - -```js -let controller; -const url = "video.mp4"; - -const downloadBtn = document.querySelector(".download"); -const abortBtn = document.querySelector(".abort"); - -downloadBtn.addEventListener("click", fetchVideo); - -abortBtn.addEventListener("click", () => { - if (controller) { - controller.abort(); - console.log("Download aborted"); - } -}); - -async function fetchVideo() { - controller = new AbortController(); - const signal = controller.signal; - - try { - const response = await fetch(url, { signal }); - console.log("Download complete", response); - // process response further - } catch (err) { - console.error(`Download error: ${err.message}`); - } -} -``` - -If the request is aborted after the `fetch()` call has been fulfilled but before the response body has been read, then attempting to read the response body will reject with an `AbortError` exception. - -```js -async function get() { - const controller = new AbortController(); - const request = new Request("https://example.org/get", { - signal: controller.signal, - }); - - const response = await fetch(request); - controller.abort(); - // The next line will throw `AbortError` - const text = await response.text(); - console.log(text); -} -``` +See the [`AbortSignal` page](/en-US/docs/Web/API/AbortSignal#examples) for usage examples. You can find a [full working example on GitHub](https://github.com/mdn/dom-examples/tree/main/abort-api); you can also see it [running live](https://mdn.github.io/dom-examples/abort-api/). diff --git a/files/en-us/web/api/abortcontroller/signal/index.md b/files/en-us/web/api/abortcontroller/signal/index.md index 6cf0edcd64894c5..2cb296a036f8b85 100644 --- a/files/en-us/web/api/abortcontroller/signal/index.md +++ b/files/en-us/web/api/abortcontroller/signal/index.md @@ -16,51 +16,7 @@ An {{domxref("AbortSignal")}} object instance. ## Examples -In the following snippet, we aim to download a video using the [Fetch API](/en-US/docs/Web/API/Fetch_API). - -We first define a variable for our `AbortController`. - -Before each [fetch request](/en-US/docs/Web/API/Window/fetch) we create new instance of controller using the {{domxref("AbortController.AbortController","AbortController()")}} constructor, then grab a reference to its associated {{domxref("AbortSignal")}} object using the {{domxref("AbortController.signal")}} property. - -> [!NOTE] -> An `AbortSignal` can only be used once. After it is aborted, any fetch call using the same signal will be immediately rejected with a `DOMException` named `AbortError`. - -When the [fetch request](/en-US/docs/Web/API/Window/fetch) is initiated, we pass in the `AbortSignal` as an option inside the request's options object (the `{signal}` below). This associates the signal and controller with the fetch request and allows us to abort it by calling {{domxref("AbortController.abort()")}}, as seen below in the second event listener. - -When `abort()` is called, the `fetch()` promise rejects with a `DOMException` named `AbortError`. - -```js -let controller; -const url = "video.mp4"; - -const downloadBtn = document.querySelector(".download"); -const abortBtn = document.querySelector(".abort"); - -downloadBtn.addEventListener("click", fetchVideo); - -abortBtn.addEventListener("click", () => { - if (controller) { - controller.abort(); - console.log("Download aborted"); - } -}); - -async function fetchVideo() { - controller = new AbortController(); - const signal = controller.signal; - - try { - const response = await fetch(url, { signal }); - console.log("Download complete", response); - // process response further - } catch (err) { - console.error(`Download error: ${err.message}`); - } -} -``` - -> [!NOTE] -> When `abort()` is called, the `fetch()` promise rejects with an `AbortError`. +See the [`AbortSignal` page](/en-US/docs/Web/API/AbortSignal#examples) for usage examples. You can find a [full working example on GitHub](https://github.com/mdn/dom-examples/tree/main/abort-api); you can also see it [running live](https://mdn.github.io/dom-examples/abort-api/). diff --git a/files/en-us/web/api/abortsignal/index.md b/files/en-us/web/api/abortsignal/index.md index c43960962243665..43e1f5bafee55fa 100644 --- a/files/en-us/web/api/abortsignal/index.md +++ b/files/en-us/web/api/abortsignal/index.md @@ -54,10 +54,14 @@ Listen to this event using {{domxref("EventTarget.addEventListener", "addEventLi The following snippet shows how we might use a signal to abort downloading a video using the [Fetch API](/en-US/docs/Web/API/Fetch_API). -We first create an abort controller using the {{domxref("AbortController.AbortController","AbortController()")}} constructor, then grab a reference to its associated `AbortSignal` object using the {{domxref("AbortController.signal")}} property. +We first define a variable for our `AbortController`. -When the [fetch request](/en-US/docs/Web/API/Window/fetch) is initiated, we pass in the `AbortSignal` as an option inside the request's options object (the `{signal}` below). This associates the signal and controller with the fetch request, and allows us to abort it by calling {{domxref("AbortController.abort()")}}. -Below you can see that the fetch operation is aborted in the second event listener, which triggered when the abort button (`abortBtn`) is clicked. +Before each [fetch request](/en-US/docs/Web/API/Window/fetch) we create new instance of controller using the {{domxref("AbortController.AbortController","AbortController()")}} constructor, then grab a reference to its associated {{domxref("AbortSignal")}} object using the {{domxref("AbortController.signal")}} property. + +> [!NOTE] +> An `AbortSignal` can only be used once. After it is aborted, any fetch call using the same signal will be immediately rejected. + +When the [fetch request](/en-US/docs/Web/API/Window/fetch) is initiated, we pass in the `AbortSignal` as an option inside the request's options object (the `{ signal }` below). This associates the signal and controller with the fetch request and allows us to abort it by calling {{domxref("AbortController.abort()")}}, as seen below in the second event listener. When `abort()` is called, the `fetch()` promise rejects with a `DOMException` named `AbortError`. From 467f1125c592c91b2fab11c8c28f045d0003db56 Mon Sep 17 00:00:00 2001 From: wbamberg Date: Tue, 16 Sep 2025 18:15:33 -0700 Subject: [PATCH 4/4] Update files/en-us/web/api/abortsignal/index.md --- files/en-us/web/api/abortsignal/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/abortsignal/index.md b/files/en-us/web/api/abortsignal/index.md index 43e1f5bafee55fa..68b21a99b1e00e0 100644 --- a/files/en-us/web/api/abortsignal/index.md +++ b/files/en-us/web/api/abortsignal/index.md @@ -56,7 +56,7 @@ The following snippet shows how we might use a signal to abort downloading a vid We first define a variable for our `AbortController`. -Before each [fetch request](/en-US/docs/Web/API/Window/fetch) we create new instance of controller using the {{domxref("AbortController.AbortController","AbortController()")}} constructor, then grab a reference to its associated {{domxref("AbortSignal")}} object using the {{domxref("AbortController.signal")}} property. +Before each [fetch request](/en-US/docs/Web/API/Window/fetch) we create a new controller using the {{domxref("AbortController.AbortController","AbortController()")}} constructor, then grab a reference to its associated {{domxref("AbortSignal")}} object using the {{domxref("AbortController.signal")}} property. > [!NOTE] > An `AbortSignal` can only be used once. After it is aborted, any fetch call using the same signal will be immediately rejected.