commit
98de4f41bf
1 changed files with 11 additions and 11 deletions
|
@ -25,7 +25,7 @@ When `abort()` is called:
|
|||
- `controller.signal.aborted` property becomes `true`.
|
||||
|
||||
Generally, we have two parties in the process:
|
||||
1. The one that performs an cancelable operation, it sets a listener on `controller.signal`.
|
||||
1. The one that performs a cancelable operation, it sets a listener on `controller.signal`.
|
||||
2. The one that cancels: it calls `controller.abort()` when needed.
|
||||
|
||||
Here's the full example (without `fetch` yet):
|
||||
|
@ -35,7 +35,7 @@ let controller = new AbortController();
|
|||
let signal = controller.signal;
|
||||
|
||||
// The party that performs a cancelable operation
|
||||
// gets "signal" object
|
||||
// gets the "signal" object
|
||||
// and sets the listener to trigger when controller.abort() is called
|
||||
signal.addEventListener('abort', () => alert("abort!"));
|
||||
|
||||
|
@ -46,15 +46,15 @@ controller.abort(); // abort!
|
|||
alert(signal.aborted); // true
|
||||
```
|
||||
|
||||
As we can see, `AbortController` is just a means to pass `abort` events when `abort()` is called on it.
|
||||
As we can see, `AbortController` is just a mean to pass `abort` events when `abort()` is called on it.
|
||||
|
||||
We could implement same kind of event listening in our code on our own, without `AbortController` object at all.
|
||||
We could implement the same kind of event listening in our code on our own, without the `AbortController` object.
|
||||
|
||||
But what's valuable is that `fetch` knows how to work with `AbortController` object, it's integrated with it.
|
||||
But what's valuable is that `fetch` knows how to work with the `AbortController` object. It's integrated in it.
|
||||
|
||||
## Using with fetch
|
||||
|
||||
To become able to cancel `fetch`, pass the `signal` property of an `AbortController` as a `fetch` option:
|
||||
To be able to cancel `fetch`, pass the `signal` property of an `AbortController` as a `fetch` option:
|
||||
|
||||
```js
|
||||
let controller = new AbortController();
|
||||
|
@ -97,7 +97,7 @@ try {
|
|||
|
||||
## AbortController is scalable
|
||||
|
||||
`AbortController` is scalable, it allows to cancel multiple fetches at once.
|
||||
`AbortController` is scalable. It allows to cancel multiple fetches at once.
|
||||
|
||||
Here's a sketch of code that fetches many `urls` in parallel, and uses a single controller to abort them all:
|
||||
|
||||
|
@ -113,7 +113,7 @@ let fetchJobs = urls.map(url => fetch(url, {
|
|||
|
||||
let results = await Promise.all(fetchJobs);
|
||||
|
||||
// if controller.abort() is called from elsewhere,
|
||||
// if controller.abort() is called from anywhere,
|
||||
// it aborts all fetches
|
||||
```
|
||||
|
||||
|
@ -137,12 +137,12 @@ let fetchJobs = urls.map(url => fetch(url, { // fetches
|
|||
// Wait for fetches and our task in parallel
|
||||
let results = await Promise.all([...fetchJobs, ourJob]);
|
||||
|
||||
// if controller.abort() is called from elsewhere,
|
||||
// if controller.abort() is called from anywhere,
|
||||
// it aborts all fetches and ourJob
|
||||
```
|
||||
|
||||
## Summary
|
||||
|
||||
- `AbortController` is a simple object that generates `abort` event on it's `signal` property when `abort()` method is called (and also sets `signal.aborted` to `true`).
|
||||
- `fetch` integrates with it: we pass `signal` property as the option, and then `fetch` listens to it, so it becomes possible to abort the `fetch`.
|
||||
- `AbortController` is a simple object that generates an `abort` event on it's `signal` property when the `abort()` method is called (and also sets `signal.aborted` to `true`).
|
||||
- `fetch` integrates with it: we pass the `signal` property as the option, and then `fetch` listens to it, so it's possible to abort the `fetch`.
|
||||
- We can use `AbortController` in our code. The "call `abort()`" -> "listen to `abort` event" interaction is simple and universal. We can use it even without `fetch`.
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue