javascript - 将数据加载到需要多次调用API的网页中

Question

对于我的网站，我使用一个 API，需要从中加载多个变量。每个变量都依赖于前一个调用的返回值(我使用调用 1 返回的变量来进行调用 2 等)。

示例:假设我需要进行 5 个不同的 API 调用来收集所有数据，每个调用都依赖于前一个调用的返回值。那么就我而言，我就是这样做的。我将回调函数传递给第一个加载数据的函数。然后该函数将进行第一个 API 调用。当该调用完成后，它将把回调函数传递给下一个进行第二次 API 调用的函数，依此类推。当最后一个 API 调用完成时，回调函数被调用，然后我知道所有数据都已加载。在代码中，它看起来像这样(我在应用程序中使用 Trello 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();
      });
  });
}

正如您所看到的，回调函数将被传递到调用堆栈中很长一段距离。我想知道是否有更好的方法来加载数据并存储它(到目前为止，我只是将所有内容存储在一个大数组中)。从 API 加载大量数据的最佳实践是什么？

附注在我的原始代码中，每个 API 调用都在单独的函数中，但我在这里对其进行了简化，以减少示例中的代码量。

Answer 1

我不知道这是否适合您，但使用 TypeScript 可以让解决此类 JavaScript 问题变得更加简单:

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