私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
購入するEPUB/PDF
チュートリアルマップ
レッスンに戻る

Github からユーザをフェッチする

See More

Github のログイン(ユーザ名)の配列を取得し、Github からユーザをフェッチし、Github ユーザの配列を返す非同期関数 getUsers(names) を作成してください。

指定された USERNAME に対するユーザ情報の Github url は https://api.github.com/users/USERNAME です。

サンドボックスにテスト例があります。

重要な点:

  1. ユーザ毎に1つの fetch リクエストがあるはずです。また、リクエストはお互い待つ必要はありません。データはなるべく早く取得できるようにしてください。
  2. リクエストが失敗した場合、またはそのようなユーザがいない場合は、関数は結果の配列で null を返します。

テストと一緒にサンドボックスを開く

ユーザをフェッチするには次が必要です:

  1. fetch('https://api.github.com/users/USERNAME').
  2. レスポンスのステータスが 200 であれば、JS オブジェクトを読むため .json() を呼び出します。

fetch が失敗、またはレスポンスステータスが200以外の数値の場合は、結果の配列で単に null を返します。

これはそのコードです:

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

注意: .then 呼び出しは、fetch に直接アタッチされています。そのため、レスポンスがある場合には他のフェッチは待たずにすぐに .json() を読み始めます。

await Promise.all(names.map(name => fetch()...))) を使用して、その結果に対して .json() を呼び出すと、すべてのフェッチが応答するのを待ちます。 .json() を各 fetch に直接追加することで、個々のフェッチがお互いを待たずにデータをJSONとして読み始めることを保証します。

これは、たとえ私たちが主に async/await を使っていても、低レベルの Promise APIがいかに有用であるかの例です。

サンドボックスでテストと一緒に解答を開く