有时我需要等待 .forEach() 方法完成，主要是在“加载器”功能上。我就是这样做的：
$q.when(array.forEach(function(item){
//iterate on something
})).then(function(){
//continue with processing
});
我不禁觉得这不是等待.forEach() 完成的最佳方式。最好的方法是什么？
【问题讨论】：
标签： javascript angularjs
如果forEach里面没有异步代码，那么forEach就不是异步的，比如这段代码：
array.forEach(function(item){
//iterate on something
});
alert("Foreach DONE !");
forEach 完成后您将看到警报。
否则（你里面有异步的东西），你可以将forEach循环包装在Promise中：
var bar = new Promise((resolve, reject) => {
foo.forEach((value, index, array) => {
console.log(value);
if (index === array.length -1) resolve();
});
});
bar.then(() => {
console.log('All done!');
});
图片来源：@rolando-benjamin-vaz-ferreira
【讨论】：
使用 ES6 完成这项工作的最快方法就是使用 for..of 循环。
const myAsyncLoopFunction = async (array) => {
const allAsyncResults = []
for (const item of array) {
const asyncResult = await asyncFunction(item)
allAsyncResults.push(asyncResult)
}
return allAsyncResults
}
或者您可以像这样使用Promise.all() 并行循环所有这些异步请求：
const myAsyncLoopFunction = async (array) => {
const promises = array.map(asyncFunction)
await Promise.all(promises)
console.log(`All async tasks complete!`)
}
【讨论】：
const myAsyncLoopFunction = async (array) => { 或 const myAsyncLoopFunction = async function (array) { 才能使其成为函数！
var foo = [1,2,3,4,5,6,7,8,9,10];
如果您实际上是在循环中执行异步操作，则可以将其包装在一个 Promise 中...
var bar = new Promise((resolve, reject) => {
foo.forEach((value, index, array) => {
console.log(value);
if (index === array.length -1) resolve();
});
});
bar.then(() => {
console.log('All done!');
});
【讨论】：
如果您在循环中有一个异步任务并且您想等待。你可以使用for await
for await (const i of images) {
let img = await uploadDoc(i);
};
let x = 10; //this executes after
【讨论】：
forEach() 不返回任何内容，因此更好的做法是 map() + Promise.all()
var arr = [1, 2, 3, 4, 5, 6]
var doublify = (ele) => {
return new Promise((res, rej) => {
setTimeout(() => {
res(ele * 2)
}, Math.random() ); // Math.random returns a random number from 0~1
})
}
var promises = arr.map(async (ele) => {
// do some operation on ele
// ex: var result = await some_async_function_that_return_a_promise(ele)
// In the below I use doublify() to be such an async function
var result = await doublify(ele)
return new Promise((res, rej) => {res(result)})
})
Promise.all(promises)
.then((results) => {
// do what you want on the results
console.log(results)
})
【讨论】：
使用for of 代替forEach。像这样：
for (const item of array) {
//do something
}
console.log("finished");
“finished”将在循环结束后被记录。
【讨论】：
确保所有 forEach() 元素都完成执行的通用解决方案。
const testArray = [1,2,3,4]
let count = 0
await new Promise( (resolve) => {
testArray.forEach( (num) => {
try {
//some real logic
num = num * 2
} catch (e) {
// error handling
console.log(e)
} fanally {
// most important is here
count += 1
if (count == testArray.length) {
resolve()
}
}
})
})这个想法与使用索引计数的答案相同。但在实际情况下，如果发生错误，则索引方式无法正确计数。所以解决方案更加健壮。
谢谢
【讨论】：
在每个可能的唯一代码分支（包括回调）末尾更改并检查计数器。示例：
const fs = require('fs');
/**
* @description Delete files older than 1 day
* @param {String} directory - The directory to purge
* @return {Promise}
*/
async function purgeFiles(directory) {
const maxAge = 24*3600000;
const now = Date.now();
const cutoff = now-maxAge;
let filesPurged = 0;
let filesProcessed = 0;
let purgedSize = 0;
await new Promise( (resolve, reject) => {
fs.readdir(directory, (err, files) => {
if (err) {
return reject(err);
}
if (!files.length) {
return resolve();
}
files.forEach( file => {
const path = `${directory}/${file}`;
fs.stat(path, (err, stats)=> {
if (err) {
console.log(err);
if (++filesProcessed === files.length) resolve();
}
else if (stats.isFile() && stats.birthtimeMs < cutoff) {
const ageSeconds = parseInt((now-stats.birthtimeMs)/1000);
fs.unlink(path, error => {
if (error) {
console.log(`Deleting file failed: ${path} ${error}`);
}
else {
++filesPurged;
purgedSize += stats.size;
console.log(`Deleted file with age ${ageSeconds} seconds: ${path}`);
}
if (++filesProcessed === files.length) resolve();
});
}
else if (++filesProcessed === files.length) resolve();
});
});
});
});
console.log(JSON.stringify({
directory,
filesProcessed,
filesPurged,
purgedSize,
}));
}
// !!DANGER!! Change this line! (intentional syntax error in ,')
const directory = ,'/tmp'; // !!DANGER!! Changeme
purgeFiles(directory).catch(error=>console.log(error));
【讨论】：
const array = [1, 2, 3];
const results = [];
let done = 0;
const asyncFunction = (item, callback) =>
setTimeout(() => callback(item * 10), 100 - item * 10);
new Promise((resolve, reject) => {
array.forEach((item) => {
asyncFunction(item, (result) => {
results.push(result);
done++;
if (done === array.length) resolve();
});
});
}).then(() => {
console.log(results); // [30, 20, 10]
});
// or
// promise = new Promise(...);
// ...
// promise.then(...);
“results”数组中结果的顺序可能与原始数组中的项顺序不同，具体取决于每个项的 asyncFunction() 完成的时间。
【讨论】：
我不确定这个版本与其他版本相比的效率，但我最近在我的 forEach() 中有一个异步函数时使用了它。它不使用承诺、映射或 for-of 循环：
// n'th triangular number recursion (aka factorial addition)
function triangularNumber(n) {
if (n <= 1) {
return n
} else {
return n + triangularNumber(n-1)
}
}
// Example function that waits for each forEach() iteraction to complete
function testFunction() {
// Example array with values 0 to USER_INPUT
var USER_INPUT = 100;
var EXAMPLE_ARRAY = Array.apply(null, {length: USER_INPUT}).map(Number.call, Number) // [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, n_final... ] where n_final = USER_INPUT-1
// Actual function used with whatever actual array you have
var arrayLength = EXAMPLE_ARRAY.length
var countMax = triangularNumber(arrayLength);
var counter = 0;
EXAMPLE_ARRAY.forEach(function(entry, index) {
console.log(index+1); // show index for example (which can sometimes return asynchrounous results)
counter += 1;
if (triangularNumber(counter) == countMax) {
// function called after forEach() is complete here
completionFunction();
} else {
// example just to print counting values when max not reached
// else would typically be excluded
console.log("Counter index: "+counter);
console.log("Count value: "+triangularNumber(counter));
console.log("Count max: "+countMax);
}
});
}
testFunction();
function completionFunction() {
console.log("COUNT MAX REACHED");
}【讨论】：
我不得不处理同样的问题（forEach 使用 multiple promises inside）并且当前提出的解决方案都对我没有帮助。所以我实现了一个检查数组，每个承诺都会更新其完整状态。我们有一个包含整个过程的一般承诺。我们仅在每个承诺完成时才解决一般承诺。片段代码：
function WaitForEachToResolve(fields){
var checked_fields = new Array(fields.length).fill(0);
const reducer = (accumulator, currentValue) => accumulator + currentValue;
return new Promise((resolve, reject) => {
Object.keys(fields).forEach((key, index, array) => {
SomeAsyncFunc(key)
.then((result) => {
// some result post process
checked_fields[index] = 1;
if (checked_fields.reduce(reducer) === checked_fields.length)
resolve();
})
.catch((err) => {
reject(err);
});
}
)}
}
【讨论】：
我喜欢使用 async-await 而不是 .then() 语法所以对于数据的异步处理，修改了@的答案罗纳尔多这样 -
let finalData = [];
var bar = new Promise(resolve => {
foo.forEach((value, index) => {
const dataToGet = await abcService.getXyzData(value);
finalData[index].someKey = dataToGet.thatOtherKey;
// any other processing here
if (finalData[dataToGet.length - 1].someKey) resolve();
});
});
await Promise.all([bar]);
console.log(`finalData: ${finalData}`);
注意：我已经修改了 if 条件，它解决了满足我的条件的承诺。你可以在你的情况下做同样的事情。
【讨论】：
您可以使用它，因为我们在 forEach 循环中使用 async/await。您可以在循环中使用自己的逻辑。
let bar = new Promise((resolve, reject) => {
snapshot.forEach(async (doc) => {
"""Write your own custom logic and can use async/await
"""
const result = await something()
resolve(result);
});
});
let test = []
test.push(bar)
let concepts = await Promise.all(test);
console.log(concepts);
【讨论】：
对于简单的比较代码，我喜欢使用 for 语句。
doit();
function doit() {
for (var i = 0; i < $('span').length; i++) {
console.log(i,$('span').eq(i).text() );
if ( $('span').eq(i).text() == "Share a link to this question" ) { // span number 59
return;
}
}
alert('never execute');
}
【讨论】：
我一直在用这个，效果最好.forEach()
//count
var expecting = myArray.length;
myArray.forEach(function(item){
//do logic here
var item = item
//when iteration done
if (--expecting === 0) {
console.log('all done!');
}
})
【讨论】：