知道 forEach 循环何时完成答案

【问题标题】：Knowing when forEach loop finished知道 forEach 循环何时完成
【发布时间】：2021-01-19 13:16:37
【问题描述】：

我如何知道我的代码何时完成循环？完成后我还要运行一些代码，但它只能在我在那里写的所有东西都完成后才能运行。

obj.data.forEach(function(collection) {
                var serialized_array = collection['quiz_ids'];
                quiz_collections.push([collection['id'], collection['name'], collection['type'], collection['category'], serialized_array.split(',')]);

                serialized_array.split(',').forEach(function(ite) {
                  query('./php/query.php', 2, [['quiz_id', ite]]).then(function(quiz_obj) {
                    if (quiz_obj.data[0] == 'false') {

                    }
                    else {
                      fetch(quiz_obj.data[0]['data']).then(function(resp) {
                        return resp.json();
                      })
                      .then(function(data) {
                        console.log(data);
                        quiz_data.push([quiz_obj['id'], quiz_obj['name'], quiz_obj['version'], quiz_obj['data'], data]);
                      });
                    }
                  });
                });
              });

如果有帮助的话。我在第一行的 obj.data 如下所示：

这是我的查询功能：

function query(url, cmd_type, data_array) {
  var request = new XMLHttpRequest();
  var params= '';
  params = params + 'cmdtype=' + encodeURIComponent(cmd_type) + '&';
  if (data_array) {
    data_array.forEach(function(item) {
      params = params + item[0] + '=' + encodeURIComponent(item[1]) + '&';
    });
  }

  console.log(params);

  return new Promise(function(resolve, reject) {
    request.open('POST', url, true);
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.onreadystatechange = function() {
      if (request.readyState === XMLHttpRequest.DONE) {
        if (request.status === 200) {
          var response = JSON.parse(request.response);
          resolve(response);
        }
        else {
          resolve({error: 'Cant connect!'});
        }
      }
    };
    request.send(params);
  });
}

提前致谢
菲利普

【问题讨论】：

标签： javascript json loops promise

【解决方案1】：

您可以使用reduce 一个接一个地运行承诺，而不是forEach。

例子：

const data = [1, 2, 3, 4, 5];

const loopResult = data.reduce(async (previous, value) => {
  // Wait for previous loop to finish
  await previous;

  // Return new promise
  return new Promise((resolve) => {
    // Promise code
    // Make HTTP fetch here...
    resolve();
  });
}, Promise.resolve());

loopResult.then(() => {
  console.log('loop finished');
});

或者，如果您的循环不需要按顺序排列，您可以使用Promise.all：

const loopResult = Promise.all(
  data.map((value) => new Promise((resolve) => {
    // Promise code
    // Make HTTP fetch here...
    resolve();
  }))
);

loopResult.then(() => {
  console.log('loop finished');
});

【讨论】：

【解决方案2】：

一种方法是Promise.all。
你可以将你的 fetch Promise 推送到一个数组中，一旦 forEach 循环完成，就调用 Promise.all ：

const promises = [];

// start loop
const promise = query(...);
promises.push(promise);
// end loop
Promise.all(promises).then((values) => doSomething(values));

这可以解决您的问题，但是有更好的方法可以做到这一点，例如使用RxJS forkJoin。 RxJS 在处理更复杂的异步代码时非常有用。

【讨论】：

【解决方案3】：

promise 应该有一个 .then 方法，当它完成时会被调用。 then 方法将接受一个函数来调用。

var promise = // your code that gets the promise ( a call to query)
promise.then((values) => {//code to run afterwards})

【讨论】：