API를 여러 번 호출해야하는 웹 페이지에 데이터로드

Question

내 웹 사이트에서 여러 변수를로드해야하는 API를 사용 중입니다. 각 변수는 이전 호출의 반환 값에 따라 다릅니다 (호출 1에서 반환 된 변수를 사용하여 호출 2 등을 만듭니다).

예 : 내 데이터를 모두 수집하기 위해 5 가지 API 호출을 만들고 각 호출은 이전 호출의 반환 값에 의존한다고 가정 해 보겠습니다. 그렇다면 내 경우에 나는 이렇게하고있다. 콜백 함수를 데이터를로드하는 첫 번째 함수에 전달하고 있습니다. 그런 다음이 함수는 첫 번째 API 호출을 수행합니다. 이 호출이 끝나면 두 번째 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. 내 원래 코드에서 각 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

완전히 문제를 이해하지 않고이 유효한 솔루션이 아닐 수 있지만에서 빠른 눈을 복용은 각 레벨에서 루핑을 피할 수있는 배치 호출을 보여줍니다. 워드 프로세서 만 배치 한 번에 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 일괄 서비스를 소비하는 방법에 대한 자세한 정보를 제공합니다

이 다시 단 하나의 응답을받을 의미를, 그리고 정상적인 응답과 조금 다른 보인다. 응답은 객체 배열 이지만 정상적인 응답 객체는 아닙니다. 대신, 요청의 응답 코드가 인 이름으로 설정된 단일 속성의 개체입니다.