javascript - 使用 JavaScript Trello API 链接 Promise

Question

我正在尝试使用 JavaScript Trello API 来编译卡片列表，这些卡片可以来自属于任何名称为“todo”的列表下的任何用户板。

我成功地从所有名为“todo”的面板中获取了一系列列表 ID。

...

}).then(function(list_data) {

        console.log("List Data", list_data);
        console.log("List Data Length", list_data.length);

        var cards_arr = [];

        $.each(list_data, function(index, value) {

            Trello.get("/lists/" + value.id + "/cards?fields=name,shortUrl")
            .then(function(cards) {

                $.each(cards, function(index, card) {
                    cards_arr.push(card.id);
                })

            })

        })

        console.log("Cards Array", cards_arr);

        return cards_arr;

    })

当我查看显示“list_data”变量的控制台日志时，我得到一个包含 6 个项目的数组，但由于某种原因，该数组的长度等于 0 并且不允许我循环遍历“空”数组。

Console Log SnapShot

我觉得我可能没有以最有效的方式使用 Trello API，所以我将继续并在下面发布完整的代码。

任何帮助将不胜感激。谢谢

    var boards_arr = [];

    // ==== LOOP THROUGH BOARDS
    Trello.get("/member/me/boards?fields=name,id,idOrganization")
    .then(function(boards) {

        $.each(boards, function(index, board) {
            if (board.idOrganization != "5112df8dad3201247401349e") return;
            boards_arr.push(board.id);
        });

        return boards_arr;

    }).then(function(board_data) {

        var lists_arr = [];

        console.log("Board Data", board_data);

        $.each(board_data, function(index, value) {

            Trello.get("/boards/" + value + "/lists?fields=id,name")
            .then(function(lists) {

                $.each(lists, function(index, list) {

                    var listName = list.name.replace(" ", "").toLowerCase();
                    if (listName != "todo") return;

                    lists_arr.push(list.id);
                });

            });

        });

        return lists_arr;

    }).then(function(list_data) {

        console.log("List Data", list_data);
        console.log("List Data Length", list_data.length);

        var cards_arr = [];

        $.each(list_data, function(index, value) {

            Trello.get("/lists/" + value.id + "/cards?fields=name,shortUrl")
            .then(function(cards) {

                $.each(cards, function(index, card) {
                    cards_arr.push(card.id);
                })

            })

        })

        console.log("Cards Array", cards_arr);

        return cards_arr;

    })

Answer 1

由于您在 $.each 回调中运行异步操作 (Trello.get)，因此元素不会添加到数组中，直到这些元素完成之后已完成，在 $.each 返回之后。因此，当您调用 console.log(cards_arr) 时，尚未添加任何元素。

您应该做的是将 Trello.get 获得的 Promise 存储在一个数组中，然后调用 Promise.all 等待所有完成， 然后在获得所有结果后构建cards_arr数组。由于这将异步和同步操作分开，因此当您之后调用 console.log 时，您可以确保 cards_arr 实际上已完成。

promise
  .then(function(list_data) {
    console.log("List Data", list_data);
    console.log("List Data Length", list_data.length);

    // do all operations and store results in an array
    var resultPromises = list_data.map(function(value) {
      return Trello.get("/lists/" + value.id + "/cards?fields=name,shortUrl")
    });

    // wait for all operations to complete
    return Promise.all(resultPromises);
  })
  .then(function(results) {
    // create cards_arr from results
    var cards_arr = [];
    $.each(results, function(index, cards) {
      $.each(cards, function(index, card) {
        cards_arr.push(card.id);
      });
    });

    // this should print the correct array
    console.log("Cards Array", cards_arr);

    return cards_arr;
  })