GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing es.javascript.info — Fetch de usuarios de GitHub

Fetch de usuarios de GitHub

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.

La url de GitHub con la información de usuario especifica USERNAME es: https://api.github.com/users/USERNAME.

En el ambiente de prueba (sandbox) hay un ejemplo de referencia.

Detalles a tener en cuenta:

Debe realizarse una única petición fetch por cada usuario.
Para que la información esté disponible lo antes posible las peticiones no deben ejecutarse de una por vez.
Si alguna de las peticiones fallara o si el usuario no existiese, la función debe devolver null en el resultado del arreglo.

Abrir en entorno controlado con pruebas.

Para obtener un usuario tenemos que ejecutar el siguiente código: fetch('https://api.github.com/users/USERNAME').

Si la respuesta contiene el status 200, utilizamos el método .json() para leer el objeto JS.

Por el contrario, si el fetch falla o la respuesta no contiene un status 200, devolvemos null en el resultado del arreglo.

Código:

async function getUsers(names) {
  let jobs = [];

  for(let name of names) {
    let job = fetch(`https://api.github.com/users/${name}`).then(
      successResponse => {
        if (successResponse.status != 200) {
          return null;
        } else {
          return successResponse.json();
        }
      },
      failResponse => {
        return null;
      }
    );
    jobs.push(job);
  }

  let results = await Promise.all(jobs);

  return results;
}

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.

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 todas 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.

Esto es un ejemplo de cómo la API de Promesas puede ser útil aunque mayormente se utilice async/await.

Abrir la solución con pruebas en un entorno controlado.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.