在forEach循环中使用async/await有什么问题吗？我正在尝试循环浏览一系列文件，并等待每个文件的内容。
import fs from 'fs-promise'
async function printFiles () {
const files = await getFilePaths() // Assume this works fine
files.forEach(async (file) => {
const contents = await fs.readFile(file, 'utf8')
console.log(contents)
})
}
printFiles()
这段代码确实有效，但这段代码会出错吗？我有人告诉我，你不应该在这样的高阶函数中使用async/await，所以我只想问问这是否有问题。
当前回答
图片值1000字-仅用于顺序方法
背景：昨晚我也遇到了类似的情况。我使用异步函数作为foreach参数。结果是不可预测的。当我对代码进行了3次测试时，它运行了2次没有问题，1次失败。（有些奇怪）
最后我改变了主意，做了一些擦试板测试。
场景1-foreach中的异步如何实现不连续
const getPromise = (time) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`Promise resolved for ${time}s`)
}, time)
})
}
const main = async () => {
const myPromiseArray = [getPromise(1000), getPromise(500), getPromise(3000)]
console.log('Before For Each Loop')
myPromiseArray.forEach(async (element, index) => {
let result = await element;
console.log(result);
})
console.log('After For Each Loop')
}
main();
场景2-使用上面@Bergi建议的for-of循环
const getPromise = (time) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`Promise resolved for ${time}s`)
}, time)
})
}
const main = async () => {
const myPromiseArray = [getPromise(1000), getPromise(500), getPromise(3000)]
console.log('Before For Each Loop')
// AVOID USING THIS
// myPromiseArray.forEach(async (element, index) => {
// let result = await element;
// console.log(result);
// })
// This works well
for (const element of myPromiseArray) {
let result = await element;
console.log(result)
}
console.log('After For Each Loop')
}
main();
如果你是像我这样的小老派，你可以简单地使用经典for循环，这也很有效：）
const getPromise = (time) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`Promise resolved for ${time}s`)
}, time)
})
}
const main = async () => {
const myPromiseArray = [getPromise(1000), getPromise(500), getPromise(3000)]
console.log('Before For Each Loop')
// AVOID USING THIS
// myPromiseArray.forEach(async (element, index) => {
// let result = await element;
// console.log(result);
// })
// This works well too - the classic for loop :)
for (let i = 0; i < myPromiseArray.length; i++) {
const result = await myPromiseArray[i];
console.log(result);
}
console.log('After For Each Loop')
}
main();
我希望这对某人有所帮助，祝你愉快！
其他回答
我使用Array.prototype.reduce代替Promise.all和Array.prototy.map（这不能保证Promise的解析顺序），从解析的Promise开始：
async function printFiles () {
const files = await getFilePaths();
await files.reduce(async (promise, file) => {
// This line will wait for the last async function to finish.
// The first iteration uses an already resolved Promise
// so, it will immediately continue.
await promise;
const contents = await fs.readFile(file, 'utf8');
console.log(contents);
}, Promise.resolve());
}
然而，上述两种解决方案都有效，Antonio的代码更少，这是它如何帮助我从数据库中解析数据，从几个不同的子引用中，然后将它们全部推到一个数组中，并在完成所有任务后以承诺的方式进行解析：
Promise.all(PacksList.map((pack)=>{
return fireBaseRef.child(pack.folderPath).once('value',(snap)=>{
snap.forEach( childSnap => {
const file = childSnap.val()
file.id = childSnap.key;
allItems.push( file )
})
})
})).then(()=>store.dispatch( actions.allMockupItems(allItems)))
正如其他答案所提到的，您可能希望它按顺序而不是并行执行。即，运行第一个文件，等待完成，然后一旦完成，运行第二个文件。这不会发生。
我认为很重要的是要解决为什么没有发生这种情况。
想想forEach是如何工作的。我找不到来源，但我认为它的工作原理如下：
const forEach = (arr, cb) => {
for (let i = 0; i < arr.length; i++) {
cb(arr[i]);
}
};
现在想想当你做这样的事情时会发生什么：
forEach(files, async logFile(file) {
const contents = await fs.readFile(file, 'utf8');
console.log(contents);
});
在forEach的for循环中，我们调用cb（arr[i]），最后是logFile（file）。logFile函数内部有一个await，所以for循环可能会在继续到i++之前等待这个await？
不，不会的。令人困惑的是，这不是wait的工作方式。从文档中：
await分割执行流，允许异步函数的调用方继续执行。在await延迟异步函数的继续之后，随后执行后续语句。如果此await是其函数执行的最后一个表达式，则继续执行，方法是向函数的调用方返回完成await函数的未决Promise并继续执行该调用方。
因此，如果您有以下内容，则不会在“b”之前记录数字：
const delay = (ms) => {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
};
const logNumbers = async () => {
console.log(1);
await delay(2000);
console.log(2);
await delay(2000);
console.log(3);
};
const main = () => {
console.log("a");
logNumbers();
console.log("b");
};
main();
循环回到forEach，forEach就像main，logFile就像logNumbers。main不会因为logNumbers等待而停止，forEach不会因为logFile等待而停止。
这不会像OP请求的那样使用async/await，只有当您在NodeJS的后端时才有效。尽管这对某些人来说可能还是有帮助的，因为OP给出的示例是读取文件内容，通常在后端进行文件读取。
完全异步和非阻塞：
const fs = require("fs")
const async = require("async")
const obj = {dev: "/dev.json", test: "/test.json", prod: "/prod.json"}
const configs = {}
async.forEachOf(obj, (value, key, callback) => {
fs.readFile(__dirname + value, "utf8", (err, data) => {
if (err) return callback(err)
try {
configs[key] = JSON.parse(data);
} catch (e) {
return callback(e)
}
callback()
});
}, err => {
if (err) console.error(err.message)
// configs is now a map of JSON data
doSomethingWith(configs)
})
对于TypeScript用户，使用工作类型的Promise.all（array.map（迭代器））包装器
使用Promise.all（array.map（迭代器））具有正确的类型，因为TypeScript的stdlib支持已经处理了泛型。然而，每次需要异步映射时复制粘贴Promise.all（array.map（迭代器））显然不是最佳的，Promise.all（array.ma（迭代））并不能很好地传达代码的意图，因此大多数开发人员都会将其包装成一个asyncMap（）包装函数。然而，要做到这一点，需要使用泛型来确保使用const value＝await asyncMap（）设置的值具有正确的类型。
export const asyncMap = async <ArrayItemType, IteratorReturnType>(
array: Array<ArrayItemType>,
iterator: (
value: ArrayItemType,
index?: number
) => Promise<IteratorReturnType>
): Promise<Array<IteratorReturnType>> => {
return Promise.all(array.map(iterator));
};
快速测试：
it(`runs 3 items in parallel and returns results`, async () => {
const result = await asyncMap([1, 2, 3], async (item: number) => {
await sleep(item * 100);
return `Finished ${item}`;
});
expect(result.length).toEqual(3);
// Each item takes 100, 200 and 300ms
// So restricting this test to 300ms plus some leeway
}, 320);
sleep（）只是：
const sleep = async (timeInMs: number): Promise<void> => {
return new Promise((resolve) => setTimeout(resolve, timeInMs));
};
