当 async/await 遇上 forEach
什么是async/await
async/await 是 ECMAScript 2017 标准中新增的语法，其目的是简化 JavaScript 中处理异步操作的方式，使代码更加清晰易懂。在 async/await 出现之前，我们通常使用回调函数、Promise、Generator 等方式来处理异步操作。而 async/await 则可以让异步代码的编写方式更接近于同步代码，使得异步操作更加方便和易于维护。 async/await 是由 async 和 await 两个关键字组成的语法糖。其中，async 用于声明一个异步函数，await 用于等待一个异步操作的结果。使用 async/await 的代码结构更加清晰，通常比使用回调函数、Promise 等方式要简单易懂。 例如，下面是一个使用 Promise 处理异步操作的代码示例：
function asyncFunc() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('hello');
}, 1000);
});
}
asyncFunc().then(result => {
console.log(result);
});
而使用 async/await 的代码则更加直观简洁：
async function asyncFunc() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('hello');
}, 1000);
});
}
async function main() {
const result = await asyncFunc();
console.log(result);
}
main();
在上面的代码中，我们使用 async/await 定义了一个异步函数 asyncFunc，并使用 await 等待异步操作的结果。在 main 函数中，我们调用 asyncFunc，并把结果输出到控制台。使用 async/await 的代码结构更加清晰，让我们更加容易理解异步操作的执行流程。
在foreach中使用async/await
在 JavaScript 中，使用 async/await 可以方便地处理异步操作，而 forEach 是一个常用的数组方法，可以对数组进行遍历。但是，在使用 forEach 时需要注意，如果其中的操作是异步的，可能会导致意想不到的结果。 例如，在 forEach 中使用 async/await：
const array = [1, 2, 3];
array.forEach(async (item) => {
const result = await asyncFunc(item);
console.log(result);
});
在上面的代码中，我们使用 forEach 对数组进行遍历，并在遍历的过程中调用了一个异步函数 asyncFunc，然后使用 await 等待异步函数的执行结果，并输出结果到控制台。 但是，当我们运行这段代码时，发现结果并不是我们预期的那样：
undefined
undefined
undefined
这是因为，在 forEach 中使用 async/await 时，异步操作并不会等待前一个操作结束再执行下一个，而是会同时执行多个异步操作，因此输出结果是 undefined。 解决这个问题的方法是，使用 for...of 循环代替 forEach，因为 for...of 循环会等待异步操作执行结束再进行下一次循环。例如：
const array = [1, 2, 3];
for (const item of array) {
const result = await asyncFunc(item);
console.log(result);
}
这样就可以保证异步操作的顺序，并正确输出结果。
结语
牵手 给你持续分享优秀的软件，各种科普知识，以及分享些热门的互联网资讯和福利！
欢迎访问、关注、评论 并留下你的小心心❤
