diff --git a/5-network/04-fetch-abort/article.md b/5-network/04-fetch-abort/article.md index 32f7a173..14e8d13c 100644 --- a/5-network/04-fetch-abort/article.md +++ b/5-network/04-fetch-abort/article.md @@ -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`.