Add Request.signal (#24465)

* Add Request.signal * Add entry in Request interface * Fix 2 typos * Update files/en-us/web/api/request/signal/index.md Co-authored-by: dawei-wang <dawei-wang@users.noreply.github.com> * Update files/en-us/web/api/request/signal/index.md Co-authored-by: dawei-wang <dawei-wang@users.noreply.github.com> * Update files/en-us/web/api/request/signal/index.md Co-authored-by: Joshua Chen <sidachen2003@gmail.com> --------- Co-authored-by: dawei-wang <dawei-wang@users.noreply.github.com> Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
mdn · Feb 16, 2023 · 12ac0a3 · 12ac0a3
1 parent 12b18a5
commit 12ac0a3
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 0 deletions.
diff --git a/files/en-us/web/api/request/index.md b/files/en-us/web/api/request/index.md
@@ -52,6 +52,8 @@ You can create a new `Request` object using the {{domxref("Request.Request","Req
   - : Contains the referrer of the request (e.g., `client`).
 - {{domxref("Request.referrerPolicy")}} {{ReadOnlyInline}}
   - : Contains the referrer policy of the request (e.g., `no-referrer`).
+- {{domxref("Request.signal")}} {{ReadOnlyInline}}
+  - : Returns the {{domxref("AbortSignal")}} associated with the request
 - {{domxref("Request.url")}} {{ReadOnlyInline}}
   - : Contains the URL of the request.
 

diff --git a/files/en-us/web/api/request/signal/index.md b/files/en-us/web/api/request/signal/index.md
@@ -0,0 +1,53 @@
+---
+title: Request.signal
+slug: Web/API/Request/signal
+page-type: web-api-instance-property
+browser-compat: api.Request.signal
+---
+
+{{APIRef("Fetch API")}}
+
+The read-only **`signal`** property of the {{DOMxRef("Request")}} interface returns the {{domxref("AbortSignal")}} associated with the request.
+
+## Value
+
+An {{DOMxRef("AbortSignal")}} object.
+
+## Examples
+
+```js
+// Create a new abort controller
+const controller = new AbortController();
+
+// Create a request with this controller's AbortSignal object
+const req = new Request('/', { signal: controller.signal });
+
+// Add an event handler logging a message in case of abort
+req.signal.addEventListener("signal", () => {
+  console.log("abort");
+});
+
+// In case of abort, log the AbortSignal reason, if any
+fetch(req).catch(() => {
+  if (signal.aborted) {
+    if (signal.reason) {
+      console.log(`Request aborted with reason: ${signal.reason}`);
+    } else {
+      console.log("Request aborted but no reason was given.");
+    }
+  } else {
+    console.log("Request not aborted, but terminated abnormally.");
+  }
+};
+
+// Actually abort the request
+controller.abort();
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}