JAVASCRIPT

Consuming a Paginated API (Fetch All Pages)

Learn how to iteratively fetch all data from an API that implements cursor-based or offset-based pagination, ensuring complete data retrieval.

async function fetchAllPaginatedData(baseUrl, params = {}, limit = 100) {
  let allItems = [];
  let currentPage = 1;
  let hasMore = true;

  while (hasMore) {
    const urlParams = new URLSearchParams({
      ...params,
      page: currentPage,
      limit: limit
    });
    const url = `${baseUrl}?${urlParams.toString()}`;

    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      const data = await response.json();

      // Assuming API returns data in a 'items' or 'data' array and 'has_more' flag
      const items = data.items || data.data || []; // Adjust based on your API response structure
      allItems = allItems.concat(items);

      // Assuming API provides a 'has_more' boolean or checks if items array is empty
      hasMore = (data.has_more === true) || (items.length === limit && data.total_pages && currentPage < data.total_pages);
      // Or simply: hasMore = items.length === limit; if no explicit 'has_more' flag and limit implies more

      currentPage++;

      // Add a small delay to avoid hitting rate limits too quickly
      if (hasMore) {
        await new Promise(resolve => setTimeout(resolve, 50)); 
      }
    } catch (error) {
      console.error('Error fetching paginated data:', error);
      break; // Exit loop on error
    }
  }
  return allItems;
}

// Example usage:
// (async () => {
//   const products = await fetchAllPaginatedData('https://api.example.com/products', { category: 'electronics' }, 50);
//   console.log(`Fetched ${products.length} products:`, products);
// })();
How it works: This JavaScript function `fetchAllPaginatedData` demonstrates how to consume a paginated API to retrieve all available data. It uses an `async/await` loop to make sequential requests, incrementing the page number (or handling cursors if the API uses them) until no more data is available. It concatenates items from each page into a single array and includes basic error handling, making it a robust solution for collecting extensive datasets from APIs.

Need help integrating this into your project?

Our team of expert developers can help you build your custom application from scratch.

Hire DigitalCodeLabs