GV

GeezerVison

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

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

No menu could be recovered. Follow the blue links in the page.

This view

  • Original page
  • New address

GeezerVison is showing tr.javascript.info — Fetch users from GitHub

  • Eğitim
  • Network requests
  • Fetch: Temel Bilgiler
Derse geri dön
Bu materyal sadece Čeština, English, Español, فارسی, Français, Indonesia, Italiano, 日本語, 한국어, Русский, Українська, Oʻzbek, 简体中文 dillerinde mevcuttur. Lütfen Türkçe diline çevirmek için bize yardım edin.

Fetch users from GitHub

Create an async function getUsers(names), that gets an array of GitHub user names, fetches them from GitHub and returns an array of GitHub users instead.

The GitHub url with user informaiton is: https://api.github.com/users/USERNAME.

There’s a test example in the sandbox.

Important details:

  1. There should be one fetch request per user. And requests shouldn’t wait for each other. So that the data arrives as soon as possible.
  2. If a request fails, or if there’s no such user, the function should return null in the resulting array.

Testler ile korunaklı olan aç.

To fetch a user we need:

  1. fetch('https://api.github.com/users/USERNAME').
  2. If the response has status 200, call .json() to read the JS object.

If a fetch fails, or the response has non-200 status, we just return null in the resulting arrray.

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;
}

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.

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.

That’s an example of how low-level Promise API can still be useful even if we mainly use async/await.

Çözümü testler korunaklı alanda olacak şekilde aç.

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.