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からアイテムを取得して、そのアイテムを含む配列を構築します。 必要な数のアイテムが構築されたら、ループは終了します。