javascript - 等待多个 for-each 语句完成

Question

我有一个簇数组，其中每个簇包含一组特征。我使用两个 forEach 语句遍历集群和特征，以便将每个特征存储在我的“结果”数组中。

我需要进一步处理我的“结果”数组。但是当我询问数组的长度时，它指出长度为 0，尽管我可以在控制台中看到其中有一些特征。我需要找到一种方法来仅在 forEach 循环完成时处理“结果”数组。

我了解到这个问题是由 JavaScript 中的异步数据处理引起的。我已经尝试注册一个 Promise，但我无法让它工作，因为在示例中总是使用一个 forEach 循环，但我有两个 forEach 循环。

这是我的代码:

var result = [];

clusters.forEach((cluster) => {
  getFeatures(cluster_id, (features) => {
  features.forEach((feature) => {
    result.push(feature);
  });
  });
});

//do something with result array
console.log("resulting features array length: " + result.length); //results in 0

Answer 1

您实际上不需要内部的 forEach，因为它只是将功能复制到结果中，这可以通过 .push(...stuff) 完成，您必须 promise getFeatures 然后能够对所有 promise 调用 Promise.all，等待它们全部完成:

const result = [];

const allDone = Promise.all(clusters.map((cluster) => new Promise(resolve => {
  getFeatures(cluster_id, (features) => {
    result.push(...features);
    resolve();
  });
})));

allDone.then(() => {
  // result is ready to use here
});

如果您需要按顺序排列结果，您可以用它们解决 promise，然后将结果展平:

 const allDone = Promise.all(clusters.map((cluster) => new Promise(resolve => {
  getFeatures(cluster_id, (features) => {
    resolve(features);
  });
})));

allDone.then((nestedResults) => {
  const result = nestedResults.flat();
  //...
});