Skip to content

Fetch #435

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Oct 30, 2020
Merged

Fetch #435

Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion 5-network/01-fetch/01-fetch-users/_js.view/source.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@

async function getUsers(names) {
/* your code */
/* Tú código aquí */
}
14 changes: 7 additions & 7 deletions 5-network/01-fetch/01-fetch-users/solution.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@

To fetch a user we need: `fetch('https://github.com/api/users/USERNAME')`.
Para obtener un usuario tenemos que ejecutar el siguiente código: `fetch('https://github.com/api/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) {
Expand Down Expand Up @@ -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`.
16 changes: 8 additions & 8 deletions 5-network/01-fetch/01-fetch-users/task.md
Original file line number Diff line number Diff line change
@@ -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://github.com/api/users/USERNAME`.
La url de GitHub con la información de usuario especifica `USERNAME` es: `https://github.com/api/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.
Loading