javascript - ReactJS:在带有 ajax 调用的 .map() 语句完成后执行代码

Question

我的 freecodecamp twitch tv api 应用程序出现问题。

我有一个 .map() 语句，其中包含一个 ajax 调用。然后我将从调用中获得的数据推送到一个数组中。

我想在整个 .map() 循环完成后将应用程序的状态设置为数组，但不知何故，当我在 .map() 之外访问它时，数组总是空的

这是我试过的代码。

getData() {
  let tempArray= [];
  let self = this;
  STREAMER.map(function(streamer, i) {
    $.ajax({
      url: URL + streamer,
      success: (data) => {
        tempArray.push(data);
      },
      dataType: "jsonp"
    })
  });
  this.setState({data: tempArray});
}

我感觉问题出在ajax调用是异步obv。但我认为，因为我在 .map() 循环之外调用了 this.setState() 方法，这应该是同步的，所以一切都应该没问题，但事实并非如此。

顺便说一下，Ajax 调用不是问题。如果我在 success 方法中记录数据，一切都是我喜欢的。

有什么想法吗？

Answer 1

使用您的 .map() 调用返回所有 $.ajax() 调用的 promise 。然后您可以使用 $.when() 等待它们完成:

getData() {
  let tempArray= [];
  let self = this;
  $.when.apply($, STREAMER.map(function(streamer, i) {
    return $.ajax({
      url: URL + streamer,
      success: (data) => {
        tempArray.push(data);
      },
      dataType: "jsonp"
    })
  }).then(function() {}
    self.setState({data: tempArray});
  });
}

返回的 promise 将被 .map() 收集到一个数组中。返回的数组然后通过 .apply() 传递到 $.when()。这将管理等待所有的 promise ，并且你的 .then() 回调将在它们全部完成时被调用。

如果可能的话，我建议您研究一下在服务器上进行迭代工作并提供单个 HTTP API 来处理一组项目并返回聚合结果的可能性。 HTTP 请求需要时间，浏览器只会同时处理有限数量的请求。这种方法的一个特别问题是“临时”数组的顺序不一定与原始数组的顺序匹配。也就是说，当该过程完成时，tempArray[2] 可能包含也可能不包含对 STREAMER[2] 的 ajax 调用的结果。不能保证 HTTP 请求会按照它们发出的顺序完成；事实上，如果你做的不止一些，那么它们很可能会乱序完成。