GeezerVison

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

GeezerVison is showing it.javascript.info — Ricevi utenti da GitHub con Fetch

Ricevi utenti da GitHub con Fetch

Crea la funzione async getUsers(names) che riceve un array di GitHub logins ed esegue il fetch degli utenti da GitHub. Infine ritorna l’array degli utenti stessi.

Usa l’url di GitHub per le informazioni degli utenti, indicando l’utente al posto del segnaposto USERNAME: https://api.github.com/users/USERNAME.

C’è un esempio di test nella sandbox.

Dettagli importanti:

Ci dovrebbe essere una sola richiesta fetch per utente.
Le richieste non dovrebbero essere bloccanti, così che i dati possano arrivare il prima possibile.
Se una richiesta fallisce, o se non esiste tale utente, la funzione dovrebbe restituire null nell’array dei risultati.

Apri una sandbox con i test.

Per eseguire il fetch di un utente usa: fetch('https://api.github.com/users/USERNAME').

Se lo status del response è 200, chiama .json() per leggere l’oggetto (object) JS.

Altrimenti, se il fetch dovesse fallire, o lo status della risposta non è 200, ritorna null nell’array dei risultati.

So here’s the code:

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 che: la chiamata .then è agganciata direttamente al fetch, cosi che quando riceveremo una risposta, non ci sarà attesa per le altre fetches ma inizierà immediatamente la lettura di .json().

Se invece usassimo await Promise.all(names.map(name => fetch(...))) e chiamassimo .json() sui risultati, dovremmo attendere che tutte le fetches rispondano. Aggiungendo direttamente .json() ad ogni fetch invece ci assicureremo che ogni singolo fetch inizi la lettura dei dati come JSON senza attendere le altre.

Questo è un esempio di come l’API low-level Promise possa ancora essere utile anche se usiamo principalmente async/await.

Apri la soluzione con i test in una sandbox.

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.