diff --git a/files/en-us/web/api/abortcontroller/abort/index.md b/files/en-us/web/api/abortcontroller/abort/index.md index b7cda1780e4928e..f3afef8968ca092 100644 --- a/files/en-us/web/api/abortcontroller/abort/index.md +++ b/files/en-us/web/api/abortcontroller/abort/index.md @@ -30,40 +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 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. - -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; - -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"); -}); - -function fetchVideo() { - fetch(url, { signal }) - .then((response) => { - console.log("Download complete", response); - }) - .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 69b4bcb3fdf702d..241161230754286 100644 --- a/files/en-us/web/api/abortcontroller/abortcontroller/index.md +++ b/files/en-us/web/api/abortcontroller/abortcontroller/index.md @@ -22,40 +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 create a controller using the `AbortController()` constructor, then grab a reference to its associated {{domxref("AbortSignal")}} object using the {{domxref("AbortController.signal")}} property. - -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; - -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"); -}); - -function fetchVideo() { - fetch(url, { signal }) - .then((response) => { - console.log("Download complete", response); - }) - .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 9824cb869ed8db8..30baaf6f4523e3a 100644 --- a/files/en-us/web/api/abortcontroller/index.md +++ b/files/en-us/web/api/abortcontroller/index.md @@ -28,63 +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 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. - -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 4c43fb52aa2ae8e..2cb296a036f8b85 100644 --- a/files/en-us/web/api/abortcontroller/signal/index.md +++ b/files/en-us/web/api/abortcontroller/signal/index.md @@ -16,40 +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 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. - -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; - -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"); -}); - -function fetchVideo() { - fetch(url, { signal }) - .then((response) => { - console.log("Download complete", response); - }) - .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..68b21a99b1e00e0 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 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. + +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`.