返回課程

從 GitHub 擷取使用者

建立非同步函式 getUsers(names),取得 GitHub 登入陣列,從 GitHub 擷取使用者,並傳回 GitHub 使用者陣列。

給定 USERNAME 的 GitHub 使用者資訊網址為:https://api.github.com/users/USERNAME

沙盒中有一個測試範例。

重要事項

  1. 每個使用者應有一個 fetch 要求。
  2. 要求不應互相等待。這樣才能盡快收到資料。
  3. 如果任何要求失敗,或沒有該使用者,函式應在結果陣列中傳回 null

開啟有測試的沙盒。

要取得使用者,我們需要:fetch('https://api.github.com/users/USERNAME')

如果回應的狀態為 200,請呼叫 .json() 來讀取 JS 物件。

否則,如果 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,因此當我們有回應時,它不會等待其他 fetch,而是立即開始讀取 .json()

如果我們使用 await Promise.all(names.map(name => fetch(...))),並在結果上呼叫 .json(),則它會等待所有 fetch 回應。透過將 .json() 直接新增到每個 fetch,我們確保個別 fetch 會開始讀取資料,而不會互相等待。

這是一個範例,說明即使我們主要使用 async/await,低階 Promise API 仍然可能很有用。

在沙盒中開啟包含測試的解決方案。