複数のページにデータをフェッチする方法は？

Question

が

私のプロジェクトは、反応して、Reduxの、Reduxの-佐賀に基づいES6と私は、このAPIからデータを取得しようとしている。

http://api.dhsprogram.com/rest/dhs/data/BD,2000,2004,2007?&returnFields=CharacteristicLabel,Indicator,IndicatorId,Value&f=json

あなたが見ることができるように、この特定のAPI呼び出しが限度とのデータを示しています1ページあたり100データが40ページに分散されます。

この回答によれば、 http://userforum.dhsprogram.com/index.php?t=msg&th=2086&goto=9591&S=Google ページあたり最大3000dataに制限を拡張できます。

しかし、いくつかのケースでは私はこのようにそれをやって、すべての私のデータを受信しないだろうということの限界超えてAPIの呼び出しだろう：

export function fetchMetaData(countryCode: string, surveyYears: string) { 
return (fetch('http://api.dhsprogram.com/rest/dhs/data/' + countryCode + ',' + surveyYears + '?returnFields=CharacteristicLabel,Indicator,IndicatorId,Value&f=json') 
    .then(response => response.json()) 
    .then(json => json.Data.map(survey => survey))) 
} 

だから私の質問ですが、私はデータの総ページを知っているので、このAPIからすべてのデータを取得する最善の方法は何ですか。フォーラムリンクの答えは、APIをループすることを提案しています。しかし、私はこれを行うための正しい構文の使用法を見つけることができません。

私の考えは、総ページ数を得るために1回のAPI呼び出しを行うことです。これをredux + redux-sagaを使って状態に保存します。次に、新しい要求をパラメータとして合計ページを送信し、この総ページ数をフェッチします。これを行うことで、各反復ごとにデータを保存する構文を理解することはできません。

Answer 1

考えられる解決策は、最初にページ数を取得してから、適切な数のAPI呼び出しを行い、各呼び出しから約束を配列にプッシュすることです。その後、すべての約束が解決するのを待って、返されたデータで何かを行います。

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 
     }); 
    } 
} 

Answer 2

async/awaitを使用する別の解決策があります。これの美しさは、total_pagesが動的なので、リクエストを処理している間にカウントが増えれば、すべて取得できることです。

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; 
}