等待foreach循环在javascript中执行内部异步代码

Question

我写了一个类似下面的函数

function test() {
apiCall.ajaxCallWithReturnData(obj, 'GET', 'url')
.then(res => {
var metrics
metrics = res.Data.map((d) => { //filling metrics array
return {
MetricID: d.MetricID,
Metric: d.Metric
}
})
weeklyChartdata(null, 'Overall') //call method for default metric
.then(result => {
console.log('start')
})
.then(() => {
//console.log(scors)
metrics.forEach(function (m, i) {//Loop each metric
console.log('loop' + i)
weeklyChartdata(m.MetricID, m.Metric)
.then(result => {
console.log('loop' + i + 'result', result.scors)
})
})//Loop each metric                     
})
.then(() => {
console.log('done')
})
})

}

使用上面的代码，我希望得到如下订单的结果

start
loop0
loop 0 result 
loop1
loop 1 result 
loop2
loop 2 result 
done

但结果是像下面的一样生成

start
loop0
loop1
loop2
done
loop 0 result 
loop 1 result 
loop 2 result 

我理解度量标准。对于每个向前移动，而不是等待其余代码的执行。请建议我如何处理这种情况，等待循环，直到所有代码执行完毕。

Answer 1

我相信您正在寻找Promise.all((

metrics.forEach(function (m, i) {//Loop each metric
console.log('loop' + i)
weeklyChartdata(m.MetricID, m.Metric)
.then(result => {
console.log('loop' + i + 'result', result.scors)
})
})//Loop each metric      

成为(未测试(

const promises = [];
metrics.forEach((m, i) => {//Loop each metric
console.log('loop' + i)
promises.push(weeklyChartdata(m.MetricID, m.Metric)
.then(result => {
console.log('loop' + i + 'result', result.scors)
return result;
})
)  
})//Loop each metric
Promise.all(promises).then((results) => {
console.log(results);
});

希望这能有所帮助(请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)。

注意：console.log的顺序其实并不重要，而是关于你在promise.allpromise 中的结果

Answer 2

Promise.all是实现这一目标的一种非常好的方法，正如用户3791775所回答的那样。我正在以另一种方式呈现。

forEach不能很好地与异步函数配合使用。您可以使用for-of loop。所以你的metric.forEach应该像下面的代码一样(未测试(

let i=0;
for (const m of metrics){
console.log('loop' + i)
weeklyChartdata(m.metricID, m.metric)
.then(result => {
console.log('loop' + i + 'result', result.scors)
})
i++;
}