diff --git a/5-network/04-fetch-abort/article.md b/5-network/04-fetch-abort/article.md index 757846287..5cdebf03f 100644 --- a/5-network/04-fetch-abort/article.md +++ b/5-network/04-fetch-abort/article.md @@ -1,34 +1,34 @@ # Fetch: Abort -As we know, `fetch` returns a promise. And JavaScript generally has no concept of "aborting" a promise. So how can we abort a `fetch`? +Comme nous le savons, `fetch` renvoie une promesse. Et JavaScript n'a généralement pas le concept "d'abandonner" une promesse. Alors, comment pouvons-nous abandonner un `fetch` ? -There's a special built-in object for such purposes: `AbortController`, that can be used to abort not only `fetch`, but other asynchronous tasks as well. +Il existe un objet intégré spécial dédié : `AbortController`, qui peut être utilisé pour abandonner non seulement un `fetch`, mais aussi d'autres tâches asynchrones. -The usage is pretty simple: +L'utilisation est assez simple : -- Step 1: create a controller: +- Étape 1 : créez un contrôleur : ```js let controller = new AbortController(); ``` - A controller is an extremely simple object. + Un contrôleur est un objet extrêmement simple. - - It has a single method `abort()`, and a single property `signal`. - - When `abort()` is called: - - `abort` event triggers on `controller.signal` - - `controller.signal.aborted` property becomes `true`. + - Il a une seule méthode `abort()`, et une seule propriété `signal`. + - Lorsque `abort()` est appelé : + - l'événement `abort` se déclenche sur `controller.signal` + - la propriété `controller.signal.aborted` devient `true`. - All parties interested to learn about `abort()` call set listeners on `controller.signal` to track it. + Toutes les parties intéressées à en savoir plus sur l'appel `abort()` configurent des écouteurs sur `controller.signal` pour le suivre. - Like this (without `fetch` yet): + Comme ceci (sans `fetch` encore) : ```js run let controller = new AbortController(); let signal = controller.signal; - // triggers when controller.abort() is called + // se déclenche lorsque controller.abort() est appelé signal.addEventListener('abort', () => alert("abort!")); controller.abort(); // abort! @@ -36,7 +36,7 @@ The usage is pretty simple: alert(signal.aborted); // true ``` -- Step 2: pass the `signal` property to `fetch` option: +- Étape 2 : passez la propriété `signal` à l'option` fetch` : ```js let controller = new AbortController(); @@ -45,20 +45,20 @@ The usage is pretty simple: }); ``` - The `fetch` method knows how to work with `AbortController`, it listens to `abort` on `signal`. + La méthode `fetch` sait comment travailler avec `AbortController`, elle écoute `abort` sur `signal`. -- Step 3: to abort, call `controller.abort()`: +- Étape 3 : pour abandonner, appelez `controller.abort()` : ```js controller.abort(); ``` - We're done: `fetch` gets the event from `signal` and aborts the request. + Nous avons terminé : `fetch` récupère l'événement de `signal` et abandonne la requête. -When a fetch is aborted, its promise rejects with an error `AbortError`, so we should handle it, e.g. in `try..catch`: +Lorsqu'un fetch est abandonné, sa promesse est rejetée avec une erreur `AbortError`, nous devons donc le gérer, par exemple dans un `try..catch` : ```js run async -// abort in 1 second +// abandonner en 1 seconde let controller = new AbortController(); setTimeout(() => controller.abort(), 1000); @@ -67,7 +67,7 @@ try { signal: controller.signal }); } catch(err) { - if (err.name == 'AbortError') { // handle abort() + if (err.name == 'AbortError') { // gère abort() alert("Aborted!"); } else { throw err; @@ -75,12 +75,12 @@ try { } ``` -**`AbortController` is scalable, it allows to cancel multiple fetches at once.** +**`AbortController` est évolutif, il permet d'annuler plusieurs fetches à la fois.** -For instance, here we fetch many `urls` in parallel, and the controller aborts them all: +Par exemple, ici, nous récupérons de nombreuses `urls` en parallèle, et le contrôleur les annule toutes : ```js -let urls = [...]; // a list of urls to fetch in parallel +let urls = [...]; // une liste d'urls à récupérer en parallèle let controller = new AbortController(); @@ -90,19 +90,19 @@ let fetchJobs = urls.map(url => fetch(url, { let results = await Promise.all(fetchJobs); -// if controller.abort() is called from elsewhere, -// it aborts all fetches +// si controller.abort() est appelée d'ailleurs, +// elle interrompt tous les fetches ``` -If we have our own asynchronous jobs, different from `fetch`, we can use a single `AbortController` to stop those, together with fetches. +Si nous avons nos propres tâches asynchrones, différentes de `fetch`, nous pouvons utiliser un seul `AbortController` pour les arrêter, avec des fetches. -We just need to listen to its `abort` event: +Nous avons juste besoin d'écouter son événement `abort` : ```js let urls = [...]; let controller = new AbortController(); -let ourJob = new Promise((resolve, reject) => { // our task +let ourJob = new Promise((resolve, reject) => { // notre tâche ... controller.signal.addEventListener('abort', reject); }); @@ -114,8 +114,8 @@ 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, -// it aborts all fetches and ourJob +// si controller.abort() est appelée d'ailleurs, +// elle interrompt tous les fetches et ourJob ``` -So `AbortController` is not only for `fetch`, it's a universal object to abort asynchronous tasks, and `fetch` has built-in integration with it. +Donc `AbortController` n'est pas seulement pour `fetch`, c'est un objet universel pour abandonner les tâches asynchrones, et `fetch` a une intégration native avec lui.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies: