diff --git a/5-network/01-fetch/01-fetch-users/_js.view/source.js b/5-network/01-fetch/01-fetch-users/_js.view/source.js
index 0c62e7bb5..a44549779 100644
--- a/5-network/01-fetch/01-fetch-users/_js.view/source.js
+++ b/5-network/01-fetch/01-fetch-users/_js.view/source.js
@@ -1,4 +1,4 @@
async function getUsers(names) {
- /* your code */
+ /* Tú código aquí */
}
diff --git a/5-network/01-fetch/01-fetch-users/solution.md b/5-network/01-fetch/01-fetch-users/solution.md
index 3cb88e4ea..014333779 100644
--- a/5-network/01-fetch/01-fetch-users/solution.md
+++ b/5-network/01-fetch/01-fetch-users/solution.md
@@ -1,11 +1,11 @@
-To fetch a user we need: `fetch('https://api.github.com/users/USERNAME')`.
+Para obtener un usuario tenemos que ejecutar el siguiente código: `fetch('https://api.github.com/users/USERNAME')`.
-If the response has status `200`, call `.json()` to read the JS object.
+Si la respuesta contiene el status `200`, utilizamos el método `.json()` para leer el objeto JS.
-Otherwise, if a `fetch` fails, or the response has non-200 status, we just return `null` in the resulting array.
+Por el contrario, si el `fetch` falla o la respuesta no contiene un status 200, devolvemos `null` en el resultado del arreglo.
-So here's the code:
+Código:
```js demo
async function getUsers(names) {
@@ -33,8 +33,8 @@ async function getUsers(names) {
}
```
-Please note: `.then` call is attached directly to `fetch`, so that when we have the response, it doesn't wait for other fetches, but starts to read `.json()` immediately.
+Nota: la función `.then` está directamente vinculada al `fetch`. Por lo tanto, cuando se obtiene la respuesta se procede a ejecutar la función `.json()` inmediatamente en lugar de esperar a las otras peticiones.
-If we used `await Promise.all(names.map(name => fetch(...)))`, and call `.json()` on the results, then it would wait for all fetches to respond. By adding `.json()` directly to each `fetch`, we ensure that individual fetches start reading data as JSON without waiting for each other.
+Si en su lugar utilizáramos `await Promise.all(names.map(name => fetch(...)))` y llamamos a la función `.json()` sobre los resultados, entonces esperaríamos a que todos las peticiones fetch completen antes de obtener una respuesta. Al agregar `.json()` directamente en cada `fetch`, nos aseguramos de que las peticiones se procesen de manera independiente obteniendo una mejor respuesta en nuestra aplicación.
-That's an example of how low-level Promise API can still be useful even if we mainly use `async/await`.
+Esto es un ejemplo de cómo la API de Promesas puede ser útil aunque mayormente se utilice `async/await`.
diff --git a/5-network/01-fetch/01-fetch-users/task.md b/5-network/01-fetch/01-fetch-users/task.md
index 4605b4955..4a07b7c8a 100644
--- a/5-network/01-fetch/01-fetch-users/task.md
+++ b/5-network/01-fetch/01-fetch-users/task.md
@@ -1,13 +1,13 @@
-# Fetch users from GitHub
+# Fetch de usuarios de GitHub
-Create an async function `getUsers(names)`, that gets an array of GitHub logins, fetches the users from GitHub and returns an array of GitHub users.
+Crear una función async llamada `getUsers(names)`, que tome como parámetro un arreglo de logins de GitHub, obtenga el listado de usuarios de GitHub indicado y devuelva un arreglo de usuarios de GitHub.
-The GitHub url with user information for the given `USERNAME` is: `https://api.github.com/users/USERNAME`.
+La url de GitHub con la información de usuario especifica `USERNAME` es: `https://api.github.com/users/USERNAME`.
-There's a test example in the sandbox.
+En el ambiente de prueba (sandbox) hay un ejemplo de referencia.
-Important details:
+Detalles a tener en cuenta:
-1. There should be one `fetch` request per user.
-2. Requests shouldn't wait for each other. So that the data arrives as soon as possible.
-3. If any request fails, or if there's no such user, the function should return `null` in the resulting array.
+1. Debe realizarse una única petición `fetch` por cada usuario.
+2. Para que la información esté disponible lo antes posible las peticiones no deben ejecutarse de una por vez.
+3. Si alguna de las peticiones fallara o si el usuario no existiese, la función debe devolver `null` en el resultado del arreglo.
diff --git a/5-network/01-fetch/article.md b/5-network/01-fetch/article.md
index 8db2243b3..add62b4be 100644
--- a/5-network/01-fetch/article.md
+++ b/5-network/01-fetch/article.md
@@ -1,87 +1,87 @@
# Fetch
-JavaScript can send network requests to the server and load new information whenever it's needed.
+JavaScript puede enviar peticiones de red al servidor y cargar nueva información siempre que se necesite.
-For example, we can use a network request to:
+Por ejemplo, podemos utilizar una petición de red para:
-- Submit an order,
-- Load user information,
-- Receive latest updates from the server,
+- Crear una orden,
+- Cargar información de usuario,
+- Recibir las últimas actualizaciones desde un servidor,
- ...etc.
-...And all of that without reloading the page!
+...Y todo esto sin la necesidad de refrescar la página.
-There's an umbrella term "AJAX" (abbreviated Asynchronous JavaScript And XML) for network requests from JavaScript. We don't have to use XML though: the term comes from old times, that's why that word is there. You may have heard that term already.
+Se utiliza el término global "AJAX" (abreviado Asynchronous JavaScript And XML, en español: "JavaScript y XML Asincrónico") para referirse a las peticiones de red originadas desde JavaScript. Sin embargo, no estamos necesariamente condicionados a utilizar XML dado que el término es antiguo y es por esto que el acrónimo XML se encuentra aquí. Probablemente lo hayáis visto anteriormente.
-There are multiple ways to send a network request and get information from the server.
+Existen múltiples maneras de enviar peticiones de red y obtener información de un servidor.
-The `fetch()` method is modern and versatile, so we'll start with it. It's not supported by old browsers (can be polyfilled), but very well supported among the modern ones.
+Comenzaremos con el el método `fetch()` que es moderno y versátil. Este método no es soportado por navegadores antiguos (sin embargo se puede incluir un polyfill), pero es perfectamente soportado por los navegadores actuales y modernos.
-The basic syntax is:
+La sintaxis básica es la siguiente:
```js
let promise = fetch(url, [options])
```
-- **`url`** -- the URL to access.
-- **`options`** -- optional parameters: method, headers etc.
+- **`url`** -- representa la dirección URL a la que deseamos acceder.
+- **`options`** -- representa los parámetros opcionales, como puede ser un método o los encabezados de nuestra petición, etc.
-Without `options`, that is a simple GET request, downloading the contents of the `url`.
+Si no especificamos ningún `options`, se ejecutará una simple petición GET, la cual descargará el contenido de lo especificado en el `url`.
-The browser starts the request right away and returns a promise that the calling code should use to get the result.
+El navegador lanzará la petición de inmediato y devolverá una promesa (promise) que luego será utilizada por el código invocado para obtener el resultado.
-Getting a response is usually a two-stage process.
+Por lo general, obtener una respuesta es un proceso de dos pasos.
-**First, the `promise`, returned by `fetch`, resolves with an object of the built-in [Response](https://fetch.spec.whatwg.org/#response-class) class as soon as the server responds with headers.**
+**Primero, la promesa `promise`, devuelta por `fetch`, resuelve la respuesta con un objeto de la clase incorporada [Response](https://fetch.spec.whatwg.org/#response-class) tan pronto como el servidor responde con los encabezados de la petición.**
-At this stage we can check HTTP status, to see whether it is successful or not, check headers, but don't have the body yet.
+En este paso, podemos chequear el status HTTP para poder ver si nuestra petición ha sido exitosa o no, y chequear los encabezados, pero aún no disponemos del cuerpo de la misma.
-The promise rejects if the `fetch` was unable to make HTTP-request, e.g. network problems, or there's no such site. Abnormal HTTP-statuses, such as 404 or 500 do not cause an error.
+La promesa es rechazada si el `fetch` no ha podido establecer la petición HTTP, por ejemplo, por problemas de red o si el sitio especificado en la petición no existe. Estados HTTP anormales, como el 404 o 500 no generan errores.
-We can see HTTP-status in response properties:
+Podemos visualizar los estados HTTP en las propiedades de la respuesta:
-- **`status`** -- HTTP status code, e.g. 200.
-- **`ok`** -- boolean, `true` if the HTTP status code is 200-299.
+- **`status`** -- código de estado HTTP, por ejemplo: 200.
+- **`ok`** -- booleana, `true` si el código de estado HTTP es 200 a 299.
-For example:
+Ejemplo:
```js
let response = await fetch(url);
-if (response.ok) { // if HTTP-status is 200-299
- // get the response body (the method explained below)
+if (response.ok) { // si el HTTP-status es 200-299
+ // obtener cuerpo de la respuesta (método debajo)
let json = await response.json();
} else {
- alert("HTTP-Error: " + response.status);
+ alert("Error-HTTP: " + response.status);
}
```
-**Second, to get the response body, we need to use an additional method call.**
+**Segundo, para obtener el cuerpo de la respuesta, necesitamos utilizar un método adicional.**
-`Response` provides multiple promise-based methods to access the body in various formats:
+`Response` provee múltiples métodos basados en promesas para acceder al cuerpo de la respuesta en distintos formatos:
-- **`response.text()`** -- read the response and return as text,
-- **`response.json()`** -- parse the response as JSON,
-- **`response.formData()`** -- return the response as `FormData` object (explained in the [next chapter](info:formdata)),
-- **`response.blob()`** -- return the response as [Blob](info:blob) (binary data with type),
-- **`response.arrayBuffer()`** -- return the response as [ArrayBuffer](info:arraybuffer-binary-arrays) (low-level representation of binary data),
-- additionally, `response.body` is a [ReadableStream](https://streams.spec.whatwg.org/#rs-class) object, it allows you to read the body chunk-by-chunk, we'll see an example later.
+- **`response.text()`** -- lee y devuelve la respuesta en formato texto,
+- **`response.json()`** -- convierte la respuesta como un JSON,
+- **`response.formData()`** -- devuelve la respuesta como un objeto `FormData` (explicado en [el siguiente capítulo](info:formdata)),
+- **`response.blob()`** -- devuelve la respuesta como [Blob](info:blob) (datos binarios tipados),
+- **`response.arrayBuffer()`** -- devuelve la respuesta como un objeto [ArrayBuffer](info:arraybuffer-binary-arrays) (representación binaria de datos de bajo nivel),
+- Adicionalmente, `response.body` es un objeto [ReadableStream](https://streams.spec.whatwg.org/#rs-class), el cual nos permite acceder al cuerpo como si fuera un stream y leerlo por partes. Veremos un ejemplo de esto más adelante.
-For instance, let's get a JSON-object with latest commits from GitHub:
+Por ejemplo, si obtenemos un objeto de tipo JSON con los últimos commits de GitHub:
```js run async
let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch(url);
*!*
-let commits = await response.json(); // read response body and parse as JSON
+let commits = await response.json(); // leer respuesta del cuerpo y devolver como JSON
*/!*
alert(commits[0].author.login);
```
-Or, the same without `await`, using pure promises syntax:
+O también usando promesas, en lugar de `await`:
```js run
fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
@@ -89,17 +89,17 @@ fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commi
.then(commits => alert(commits[0].author.login));
```
-To get the response text, `await response.text()` instead of `.json()`:
+Para obtener la respuesta como texto, `await response.text()` en lugar de `.json()`:
```js run async
let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
-let text = await response.text(); // read response body as text
+let text = await response.text(); // leer cuerpo de la respuesta como texto
alert(text.slice(0, 80) + '...');
```
-As a show-case for reading in binary format, let's fetch and show a logo image of ["fetch" specification](https://fetch.spec.whatwg.org) (see chapter [Blob](info:blob) for details about operations on `Blob`):
+Como demostración de una lectura en formato binario, hagamos un fetch y mostremos una imagen del logotipo de ["especificación fetch"](https://fetch.spec.whatwg.org) (ver capítulo [Blob](info:blob) para más detalles acerca de las operaciones con `Blob`):
```js async run
let response = await fetch('/article/fetch/logo-fetch.svg');
@@ -108,52 +108,52 @@ let response = await fetch('/article/fetch/logo-fetch.svg');
let blob = await response.blob(); // download as Blob object
*/!*
-// create for it
+// crear tag para imagen
let img = document.createElement('img');
img.style = 'position:fixed;top:10px;left:10px;width:100px';
document.body.append(img);
-// show it
+// mostrar
img.src = URL.createObjectURL(blob);
-setTimeout(() => { // hide after three seconds
+setTimeout(() => { // ocultar luego de tres segundos
img.remove();
URL.revokeObjectURL(img.src);
}, 3000);
```
````warn
-We can choose only one body-reading method.
+Podemos elegir un solo método de lectura para el cuerpo de la respuesta.
-If we've already got the response with `response.text()`, then `response.json()` won't work, as the body content has already been processed.
+Si ya obtuvimos la respuesta con `response.text()`, entonces `response.json()` no funcionará, dado que el contenido del cuerpo ya ha sido procesado.
```js
-let text = await response.text(); // response body consumed
-let parsed = await response.json(); // fails (already consumed)
+let text = await response.text(); // cuerpo de respuesta obtenido y procesado
+let parsed = await response.json(); // fallo (ya fue procesado)
```
````
-## Response headers
+## Encabezados de respuesta
-The response headers are available in a Map-like headers object in `response.headers`.
+Los encabezados de respuesta están disponibles como un objeto de tipo Map dentro del `response.headers`.
-It's not exactly a Map, but it has similar methods to get individual headers by name or iterate over them:
+No es exactamente un Map, pero posee métodos similares para obtener de manera individual encabezados por nombre o si quisiéramos recorrerlos como un objeto:
```js run async
let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
-// get one header
+// obtenemos un encabezado
alert(response.headers.get('Content-Type')); // application/json; charset=utf-8
-// iterate over all headers
+// iteramos todos los encabezados
for (let [key, value] of response.headers) {
alert(`${key} = ${value}`);
}
```
-## Request headers
+## Encabezados de petición
-To set a request header in `fetch`, we can use the `headers` option. It has an object with outgoing headers, like this:
+Para especificar un encabezado en nuestro `fetch`, podemos utilizar la opción `headers`. La misma posee un objeto con los encabezados salientes, como se muestra en el siguiente ejemplo:
```js
let response = fetch(protectedUrl, {
@@ -163,7 +163,7 @@ let response = fetch(protectedUrl, {
});
```
-...But there's a list of [forbidden HTTP headers](https://fetch.spec.whatwg.org/#forbidden-header-name) that we can't set:
+...Pero existe una [lista de encabezados](https://fetch.spec.whatwg.org/#forbidden-header-name) que no pueden ser especificados:
- `Accept-Charset`, `Accept-Encoding`
- `Access-Control-Request-Headers`
@@ -186,27 +186,27 @@ let response = fetch(protectedUrl, {
- `Proxy-*`
- `Sec-*`
-These headers ensure proper and safe HTTP, so they are controlled exclusively by the browser.
+Estos encabezados nos aseguran que nuestras peticiones HTTP sean controladas exclusivamente por el navegador, de manera correcta y segura.
-## POST requests
+## Peticiones POST
-To make a `POST` request, or a request with another method, we need to use `fetch` options:
+Para ejecutar una petición `POST`, o cualquier otro método, utilizaremos las opciones de `fetch`:
-- **`method`** -- HTTP-method, e.g. `POST`,
-- **`body`** -- the request body, one of:
- - a string (e.g. JSON-encoded),
- - `FormData` object, to submit the data as `form/multipart`,
- - `Blob`/`BufferSource` to send binary data,
- - [URLSearchParams](info:url), to submit the data in `x-www-form-urlencoded` encoding, rarely used.
+- **`method`** -- metodo HTTP, por ej: `POST`,
+- **`body`** -- cuerpo de la respuesta, cualquiera de las siguientes:
+ - cadena de texto (e.g. JSON),
+ - Objeto `FormData`, para enviar información como `form/multipart`,
+ - `Blob`/`BufferSource` para enviar información en formato binario,
+ - [URLSearchParams](info:url), para enviar información en cifrado `x-www-form-urlencoded` (no utilizado frecuentemente).
-The JSON format is used most of the time.
+El formato JSON es el más utilizado.
-For example, this code submits `user` object as JSON:
+Por ejemplo, el código debajo envía la información `user` como un objeto JSON:
```js run async
let user = {
- name: 'John',
- surname: 'Smith'
+ nombre: 'Juan',
+ apellido: 'Perez'
};
*!*
@@ -223,21 +223,21 @@ let result = await response.json();
alert(result.message);
```
-Please note, if the request `body` is a string, then `Content-Type` header is set to `text/plain;charset=UTF-8` by default.
+Tener en cuenta, si la respuesta del `body` es una cadena de texto, entonces el encabezado `Content-Type` será especificado como `text/plain;charset=UTF-8` por defecto.
-But, as we're going to send JSON, we use `headers` option to send `application/json` instead, the correct `Content-Type` for JSON-encoded data.
+Pero, cómo vamos a enviar un objeto JSON, en su lugar utilizaremos la opción `headers` especificada a `application/json`, que es la opción correcta `Content-Type` para información en formato JSON.
-## Sending an image
+## Enviando una imagen
-We can also submit binary data with `fetch` using `Blob` or `BufferSource` objects.
+También es posible enviar datos binarios con `fetch`, utilizando los objetos `Blob` o `BufferSource`.
-In this example, there's a `