BFE.devでのAI解答例 - JavaScript コーディング問題
56. ページネーションのつくAPIを叩く

以下は、forループを使った解法です。

const fetchListWithAmount = async (amount: number = 5) => {
  const result = [];
  let lastItemId = undefined;

  while (amount > 0) {
    const response = await fetchList(lastItemId);
    const { items } = response;

    if (!items || items.length === 0) {
      break;
    }

    lastItemId = items[items.length - 1].id;
    result.push(...items);

    amount -= items.length;
  }

  return result;
};

この関数では、resultという配列を定義して、受け取ったアイテムをその配列に追加しています。 そして、lastItemIdを更新し、必要な数のアイテムが収集されるまで、APIを反復的に呼び出し、収集されたアイテムの数を減らしています。 itemsが返されなくなった場合、またはアイテム数が0になった場合、ループは終了します。

以下は、Async iteratorsを使用した解決策です。

async function* listIterator(since?: number) {
  let lastItemId = since;

  while (true) {
    const response = await fetchList(lastItemId);
    const { items } = response;

    if (!items || items.length === 0) {
      break;
    }

    lastItemId = items[items.length - 1].id;

    for (const item of items) {
      yield item;
    }
  }
}

const fetchListWithAmount = async (amount: number = 5) => {
  const result = [];

  for await (const item of listIterator()) {
    result.push(item);

    if (result.length >= amount) {
      break;
    }
  }

  return result;
};

ここでは、listIteratorというasync generator関数を定義します。 この関数は、fetchListとともにAPIを呼び出し、itemsを反復処理するためにfor-ofループを使用します。 この関数の返す値は、yieldによって生成されます。

fetchListWithAmountは、listIteratorからアイテムを取得して、そのアイテムを含む配列を構築します。 必要な数のアイテムが構築されたら、ループは終了します。