How to fetch data over multiple pages?

Question

My project is based on React, redux, redux-saga, es6 and I try to fetch data from this API:

http://api.dhsprogram.com/rest/dhs/data/BD,2000,2004,2007?&returnFields=C

Answer 1

Here is another possible solution using async/await. The beauty of this is that the total_pages count is dynamic, so that if it increases while you're processing your request, it'll make sure you get it all.

async function fetchMetaData() {
  let allData = [];
  let morePagesAvailable = true;
  let currentPage = 0;

  while(morePagesAvailable) {
    currentPage++;
    const response = await fetch(`http://api.dhsprogram.com/rest/dhs/data?page=${currentPage}`)
    let { data, total_pages } = await response.json();
    data.forEach(e => allData.unshift(e));
    morePagesAvailable = currentPage < total_pages;
  }

  return allData;
}

Answer 2

A possible solution -the idea is to get the number of pages first, then make the appropriate number of API calls, pushing the promise from each call into an array. We then wait for all the promises to resolve, and do something with the returned data.

function fetchMetaData() {
    let pagesRequired = 0;

    fetch('apiUrlToGetPageNumber')
    .then(resp = > {
        const apiPromises = [];
        pagesRequired = resp.data.pagesRequired;

        for (let i=pagesRequired; i>0;i--) {
            apiPromises.push(fetch('apiUrlToSpecificPage?page = ' + i));
        }

        Promise.all(apiPromises)
        .then(responses => {
            const processedResponses = [];
            responses.map(response => {
                processedResponses.push(response);
            }

            // do something with processedResponses here
        });
    }
}