APIへの複数の呼び出しが必要なウェブページへのデータのロード

Question

私のウェブサイトでは、いくつかの変数をロードする必要があるAPIを使用しています。変数のそれぞれは、前の呼び出しの戻り値に依存します（呼び出し1から返された変数を使用して呼び出し2などを行います）。

例： すべてのデータを収集するために5つの異なるAPI呼び出しを作成する必要があり、それぞれが以前の呼び出しの戻り値に依存しているとします。それから私の場合、私はこのようにしています。私はデータをロードする最初の関数にコールバック関数を渡しています。その関数は最初のAPI呼び出しを行います。その呼び出しが終了すると、コールバック関数が2番目のAPI呼び出しを行う次の関数に渡されます。最後のAPI呼び出しが終了すると、コールバック関数が呼び出され、すべてのデータがロードされたことがわかります。あなたは、コールバック関数がに長い道のりを渡されます見ることができるように

function loadData(cb){ 
    //Make the first API call 
    Trello.get('/member/me/boards', function(boards){ 
    myBoards = boards; 
    for(var i = 0; i < boards.length; i++){ 
     //Make the second API call 
     Trello.get('/boards/' + board[i].id + '/lists', function(lists){ 
     board[i].lists = lists; 
     //Then make the third and fourth and so on 
     ..... 
     //When all calls are made call the callback function 
     cb(); 
     }); 
    }); 
} 

：コードでは、この（私は以下の例では、それを使用しますので、私は自分のアプリケーションでTrelloのAPIを使用しています）のようになります。コールスタック。私はデータをロードして格納するためのより良い方法があるかどうか疑問に思っていました（現在はすべてを大規模な配列に格納しています）。また、APIから大量のデータをロードするためのベストプラクティスは何ですか？

P.S.私の元のコードでは、各API呼び出しは別々の関数になっていますが、この例ではコードの量を減らすためにここで簡略化しました。

Answer 1

最初のデータがクライアントに速く届くようにするには、深い最初のアプローチに焦点を当てることがあります。

function loadData(showChunk){ 
//Make the first API call 
Trello.get('/member/me/boards', function(boards){ 
    myBoards = boards; 
    (function getboard(i){ 
     //Make the second API call 
     Trello.get('/boards/' + board[i].id + '/lists', function(lists){ 
      board[i].lists = lists; 
     //Then make the third and fourth and so on 
     ..... 
     //When all calls are made for the first board call the callback function, and also continue with the next board 
     showChunk(); 
     if(i+1<boards.length) setTimeout(getboard, 1, i+1); 
    }); 
    })(0); 
}); 
} 

Answer 2

私はこれがあなたのためのオプションである場合は知っているが、活字体を使用していません完全にあなたの問題、これは有効な解決策になるが、でチラッを取っていないことを理解せずに

async function loadData() { 
    const boards = await Trello.get('/member/me/boards'); 
    return boards.map(async (board) => { 
     const lists = await Trello.get('/boards/' + board.id + '/lists'); 
     const something = await Trello.get('/...'); 
     const somethingElse = await Trello.get('/...'); 
     // ...more calls 
     return { 
      ...board, 
      lists: lists, 
      something: something, 
      somethingElse: somethingElse 
      // ... more attributes 
     }; 
    }); 
} 

loadData().then((data) => console.log(data)); 

Answer 3

：はるかに簡単なJavaScriptのこの種の問題を解決しますは、各レベルでのループを避けるために行うことができるバッチコールを示しています。ドキュメントはあなたが唯一のバッチ時点で10個の要求は、私が追加できることを述べた。ここで注意すべき

function loadData(cb){ 
    //Make the first API call 
    Trello.get('/member/me/boards', function(boards){ 
    myBoards = boards; 
    var boardAPIs = []; 
    var boardResponses = []; 
    for(var i = 0; i < boards.length; i++){ 
     boardAPIs.push('/boards/' + board[i].id + '/lists'); 
     //max of 10 at a time per documentation 
     if (boardAPIs.length == 10 || i >= (boards.length - 1)) { 
      //Make the second level API call 
     Trello.get('/batch/?urls=' + boardAPIs.join(','), function(boards){ 
      // collect response information on all boards, then continue with third request 
      boardResponses.push(...); 

      if (i >= (boards.length - 1)) { 
       // all board requests have been made, continue execution at third level 
       // if this were the last level of calls, you could call cb() here 
       for(var j = 0; i < boardResponses.length; i++){ 
        // loop inside responses to get individual board responses, build up next set of batch requests 
       } 
      } 
     }); 
     boardAPIs= []; 
     } 
    }); 


    }); 
} 

一つのこと：これらは各レベルで多くの少数のAPI呼び出しを可能にし、ベストプラクティスと考えられるバッチ処理それをチェックするためのコードがいくつかあります。

This postは、バッチサービスを消費する方法の詳細情報を提供しています。

これはあなたが戻って、単一の応答を取得し、それが正常な応答から少し 違って見えることを意味します。レスポンスはオブジェクトの配列です - あなたが期待するかもしれない通常のレスポンスオブジェクトではありません。代わりに、 は、単一のプロパティを持つオブジェクトです。要求の応答コードには、HTTP という名前が設定されています。