diff --git a/5-network/04-fetch-abort/article.md b/5-network/04-fetch-abort/article.md index 757846287..a1916e958 100644 --- a/5-network/04-fetch-abort/article.md +++ b/5-network/04-fetch-abort/article.md @@ -1,28 +1,28 @@ # 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`? +Como sabemos `fetch` devuelve una promesa, y generalmente JavaScript no tiene un concepto de "abortar" una promesa. Entonces, ¿cómo podemos abortar una llamada al método `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. +Existe para esto de forma nativa un objeto especial: `AbortController`, este puede ser utilizado para abortar una tarea `fetch`, así como otras tareas asincrónicas. -The usage is pretty simple: +Su uso es muy sencillo: -- Step 1: create a controller: +- Paso 1: crear un controlador: ```js let controller = new AbortController(); ``` - A controller is an extremely simple object. + Este controlador es un objeto extremadamente 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`. + - Tiene un único método `abort()`, así como una única propiedad `signal`. + - Cuando `abort()` es invocado: + - El evento `abort` se dispara en `controller.signal` + - La propiedad `controller.signal.aborted` toma el valor `true`. - All parties interested to learn about `abort()` call set listeners on `controller.signal` to track it. + Todas las partes interesadas en estar al tanto de una llamada a `abort()` realizan un seguimiento a la propiedad `controller.signal`. - Like this (without `fetch` yet): + Tal como se muestra a continuación (por ahora sin `fetch`): ```js run let controller = new AbortController(); @@ -36,7 +36,7 @@ The usage is pretty simple: alert(signal.aborted); // true ``` -- Step 2: pass the `signal` property to `fetch` option: +- Paso 2: Se pasa la propiedad `signal` en la opción de `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`. + El método `fetch` conoce como funciona `AbortController`, el escucha por `abort` en `signal`. -- Step 3: to abort, call `controller.abort()`: +- Paso 3: Se llama al método `controller.abort()` para abortar: ```js controller.abort(); ``` - We're done: `fetch` gets the event from `signal` and aborts the request. + Y así `fetch` obtiene el evento desde `signal` y aborta la solicitud. -When a fetch is aborted, its promise rejects with an error `AbortError`, so we should handle it, e.g. in `try..catch`: +Cuando un fetch es abortado su promesa es rechazada con un error del tipo `AbortError`, por lo que es posible responder a esto utilizando un bloque `try..catch` por ejemplo: ```js run async -// abort in 1 second +// Se abortara en un segundo 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') { // se maneja el abort() alert("Aborted!"); } else { throw err; @@ -75,12 +75,12 @@ try { } ``` -**`AbortController` is scalable, it allows to cancel multiple fetches at once.** +**`AbortController` es escalable, permitiendo cancelar múltiples fetch a la vez.** -For instance, here we fetch many `urls` in parallel, and the controller aborts them all: +Por ejemplo, aquí tenemos muchas `urls` en paralelo, y el controlador las aborta todas: ```js -let urls = [...]; // a list of urls to fetch in parallel +let urls = [...]; // una lista de urls para utilizar fetch en paralelo let controller = new AbortController(); @@ -90,32 +90,32 @@ 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() es llamado, +// se abortaran todas las solicitudes fetch ``` -If we have our own asynchronous jobs, different from `fetch`, we can use a single `AbortController` to stop those, together with fetches. +En el caso de tener nuestras propias tareas asincrónicas aparte de `fetch`, podemos utilizar un único `AbortController` para detenerlas junto con fetch. -We just need to listen to its `abort` event: +Solo es necesario escuchar el evento `abort`: ```js let urls = [...]; let controller = new AbortController(); -let ourJob = new Promise((resolve, reject) => { // our task +let ourJob = new Promise((resolve, reject) => { // nuestra tarea ... controller.signal.addEventListener('abort', reject); }); -let fetchJobs = urls.map(url => fetch(url, { // fetches +let fetchJobs = urls.map(url => fetch(url, { // varios fetch signal: controller.signal })); -// Wait for fetches and our task in parallel +// Se espera por la finalización de los fetch y nuestra tarea let results = await Promise.all([...fetchJobs, ourJob]); -// if controller.abort() is called from elsewhere, -// it aborts all fetches and ourJob +// en caso de que se llame al método controller.abort() desde algún sitio, +// se abortan todos los fetch y nuestra tarea. ``` -So `AbortController` is not only for `fetch`, it's a universal object to abort asynchronous tasks, and `fetch` has built-in integration with it. +Por lo tanto, si bien `fetch` incorpora esta funcionalidad de forma nativa, `AbortController` no es sólo para `fetch`, sino que es un objeto universal para abortar tareas asincrónicas. pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

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:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy