Skip to content

Commit

Permalink
Merge pull request #360 from MaskeZen/fetch-abort
Browse files Browse the repository at this point in the history
Fetch: Abort
  • Loading branch information
vplentinax committed Aug 27, 2020
2 parents b364a89 + 86fafcf commit 846f944
Showing 1 changed file with 31 additions and 31 deletions.
62 changes: 31 additions & 31 deletions 5-network/04-fetch-abort/article.md
Original file line number Diff line number Diff line change
@@ -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();
Expand All @@ -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();
Expand All @@ -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);

Expand All @@ -67,20 +67,20 @@ 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;
}
}
```

**`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();

Expand All @@ -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.

0 comments on commit 846f944

Please sign in to comment.