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`.
|
- `controller.signal.aborted` property becomes `true`.
|
||||||
|
|
||||||
Generally, we have two parties in the process:
|
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.
|
2. The one that cancels: it calls `controller.abort()` when needed.
|
||||||
|
|
||||||
Here's the full example (without `fetch` yet):
|
Here's the full example (without `fetch` yet):
|
||||||
|
@ -35,7 +35,7 @@ let controller = new AbortController();
|
||||||
let signal = controller.signal;
|
let signal = controller.signal;
|
||||||
|
|
||||||
// The party that performs a cancelable operation
|
// 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
|
// and sets the listener to trigger when controller.abort() is called
|
||||||
signal.addEventListener('abort', () => alert("abort!"));
|
signal.addEventListener('abort', () => alert("abort!"));
|
||||||
|
|
||||||
|
@ -46,15 +46,15 @@ controller.abort(); // abort!
|
||||||
alert(signal.aborted); // true
|
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
|
## 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
|
```js
|
||||||
let controller = new AbortController();
|
let controller = new AbortController();
|
||||||
|
@ -97,7 +97,7 @@ try {
|
||||||
|
|
||||||
## AbortController is scalable
|
## 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:
|
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);
|
let results = await Promise.all(fetchJobs);
|
||||||
|
|
||||||
// if controller.abort() is called from elsewhere,
|
// if controller.abort() is called from anywhere,
|
||||||
// it aborts all fetches
|
// it aborts all fetches
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -137,12 +137,12 @@ let fetchJobs = urls.map(url => fetch(url, { // fetches
|
||||||
// Wait for fetches and our task in parallel
|
// Wait for fetches and our task in parallel
|
||||||
let results = await Promise.all([...fetchJobs, ourJob]);
|
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
|
// it aborts all fetches and ourJob
|
||||||
```
|
```
|
||||||
|
|
||||||
## Summary
|
## 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`).
|
- `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 `signal` property as the option, and then `fetch` listens to it, so it becomes possible to abort the `fetch`.
|
- `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`.
|
- 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