Question

我正在尝试创建一个使用twitch.tv api查看一系列抽搐流媒体的查看器，然后发布哪些用户当前在线以及他们正在流式传输什么。我在弄清楚如何使用回调的异步特性时遇到了一些麻烦。

我想为数组中的每个抽搐用户循环一次api调用。在他们全部归还之后，我希望能够对它们进行排序，并按照特定标准的顺序列出它们。

经过大量研究后，我试图用承诺来做到这一点。但是我仍然无法解决这个问题。

我使用过这个问题：How can I wait for set of asynchronous callback functions?这个问题：How do I return the response from an asynchronous call?作为指导，但显然我仍然缺少一些重要的东西。我已经发布了我的代码的相关部分。我很感激任何帮助/推动正确的方向我缺少。

 $(document).ready(function() {
var channels = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff","ESL_SC2", "brunofin"];
var test = [];
function getData(){
    var promises = [];
    for (var i = 0; i < channels.length; i++) {
        promises.push($.getJSON('https://api.twitch.tv/kraken/streams/'+channels[i]+'?callback=?', function(data) {}));
    }
    $.when.apply($, promises).then(function() {
        // returned data is in arguments[0][0], arguments[1][0], ... arguments[9][0]
        // you can process it here
        for(var j=0; j<promises.length; j++){
            //console.log(promises[j].responseJSON);
            test.push(promises[j]);
        }
    }, function() {
        // error occurred
        conole.log("get data error");
    });
}

    getData();
    console.log("do I have data?: ");
    for(var j=0; j<test.length; j++){
            console.log(test[j].responseJSON); //This is empty and where I need the data!
        }

}）;

Answer 1

在您的代码中，您正在调用getData()，然后在下一行中迭代test数组。这发生在事件循环的同一次传递中，因此您不会给您的承诺任何实际运行逻辑并解决任何问题的机会。逐行执行是同步的，不会在两者之间执行任何操作。

解决方案是从getData函数返回一个promise并等待它解析。

由于您正在使用Promises，因此您也不需要回调$getJSON函数。

$(document).ready(function() {
  var channels = [
    "freecodecamp", "storbeck", "terakilobyte", "habathcx",
    "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff",
    "ESL_SC2", "brunofin"
  ];

  var test = [];

  function getData() {
    var promises = [];
    for (var i = 0; i < channels.length; i++) {
      promises.push(
        $.getJSON(
          'https://api.twitch.tv/kraken/streams/'+channels[i]+'?callback=?'
        )
      );
    }

    return $.when.apply($, promises).then(function() {
      for(var j=0; j<promises.length; j++){
        test.push(promises[j]);
      }
    });
  }

  getData().then(function() {
    console.log("do I have data?: ");
    for(var j=0; j<test.length; j++) {
       console.log(test[j].responseJSON);
     }
  });
});

我还建议重构一下这段代码。这是一个有趣的问题，在JavaScript中是常见的事情，我想演示如何使用这个例子来处理promises数组。

每个异步操作都独立运行，你的直觉是正确的：你需要一些额外的工具将所有结果放在一起。

使用promises时，此工具为Promise.all。事实上，jQuery的$.when是相似的，尽管由于其输入和返回类型，我发现Promise.all更容易使用。它也是标准的JavaScript，可在所有现代浏览器中使用。

当许多个别承诺解决时，

Promise.all可用于运行某些逻辑。形式上，Promise.all接受一系列promise并返回一个promise，当所有输入promise都解析时（或其中一个拒绝），它会解析。它解析为一系列已解析的值，个别承诺将解析为。

由于Promise.all采用数组，因此适用于map和filter等数组方法。

function getStreams(channels) {
  // Transform an array of channel names into an array of Promises
  // representing the asynchronous action of getting the info
  // about each channel.
  const promises = channels.map(
    channel => $.getJSON(
      'https://api.twitch.tv/kraken/streams/'+channel+'?callback=?'
    )
  );

  // Return a new promise which will resolve when *all* channels
  // have been queried.
  return Promise.all(promises);
}

const channels = [
  "freecodecamp", "storbeck", "terakilobyte", "habathcx",
  "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff",
  "ESL_SC2", "brunofin"
];

getStreams(channels).then(
  // infos is an array of resolved data about the channels
  infos => infos.forEach(
    info => console.log(info)
  )
);

Answer 2

异步正如名称所暗示的那样。

您只能在when回调的第一个函数中访问该数据。由于在此之前您的网页上不存在数据。

在使用检索到的数据之前，我怎么能等到异步回调完成？

2 个答案: