Merge pull request #2386 from RapTho/patch-2

Typos + rephrasing
This commit is contained in:
Ilya Kantor 2020-12-31 21:50:34 +03:00 committed by GitHub
commit 98de4f41bf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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`.