Suggest an edit

Improve this article

Refine the answer for “What does AbortController do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What AbortController does

`AbortController` is a special object that lets you **create a "cancellation signal"** (`AbortSignal`) and **send a "cancel" command** to asynchronous operations that listen to it.

In simpler terms:

> `AbortController` manages the "canceled or not" state,
> while `AbortSignal` is the "flag" that asynchronous code can watch.

---

## Example of basic usage with fetch

```javascript
const controller = new AbortController(); // create a controller
const signal = controller.signal;          // get the signal from it

fetch('https://example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('The request was canceled');
    } else {
      console.error('Error:', err);
    }
  });

// Cancel the request after 1 second:
setTimeout(() => {
  controller.abort(); // cancellation
}, 1000);
```

What happens:

1. We create a controller -> pass `controller.signal` into `fetch`.
2. When we call `controller.abort()`,
- `fetch` is instantly interrupted,
- an `AbortError` is thrown.

---

## How it works internally

`AbortController` creates an object with two key properties:

- `signal` is an `AbortSignal` object that can be passed into an asynchronous operation.
- `abort()` is a method that activates this signal (changes its state and calls all handlers).

---

## What AbortSignal does

`AbortSignal`:

- Has a `.aborted` property (a boolean: `true` if the operation was canceled);
- Can listen for the `"abort"` event:

```javascript
const controller = new AbortController();
const signal = controller.signal;

signal.addEventListener('abort', () => {
  console.log('Operation canceled!');
});

controller.abort(); // => "Operation canceled!"
```

---

## Where you can use it

`AbortController` is supported by many APIs:

| API | Supports cancellation? |
|---|---|
| `fetch()` | Yes |
| `ReadableStream`, `WritableStream` | Yes |
| `WebSocket` (through a custom wrapper) | Partially |
| `setTimeout` / `setInterval` (via the AbortSignal API in Node 20+ or a browser polyfill) | Yes |
| `navigator.sendBeacon()` (in some browsers) | Partially |
| Your own async functions | Yes (if you implement support manually) |

---

## Example with Promise and custom cancellation

You can use the signal in your own asynchronous functions:

```javascript
function wait(ms, signal) {
  return new Promise((resolve, reject) => {
    const timeout = setTimeout(resolve, ms);

signal.addEventListener('abort', () => {
      clearTimeout(timeout);
      reject(new Error('Canceled by the user'));
    });
  });
}

const controller = new AbortController();
wait(5000, controller.signal)
  .then(() => console.log('5 seconds have passed'))
  .catch(err => console.log(err.message));

setTimeout(() => controller.abort(), 2000); // cancel after 2 sec
```

Result:

```javascript
Canceled by the user
```

---

## Reuse

The controller is single-use:

- After `controller.abort()`, its `signal` permanently becomes `.aborted = true`.
- To use it again, you need to create a **new** `AbortController`.

---

## Summary

| Property / method | What it does |
|---|---|
| `new AbortController()` | creates a controller |
| `.signal` | the signal to pass into an async API |
| `.abort()` | sends the "cancel" signal |
| `signal.aborted` | `true` if canceled |
| `signal.addEventListener('abort', fn)` | listens for the cancellation event |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts490 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.