当 async/await 遇上 forEach（async await会阻塞吗）

什么是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);}

这样就可以保证异步操作的顺序，并正确输出结果。

结语

牵手 给你持续分享优秀的软件，各种科普知识，以及分享些热门的互联网资讯和福利！
欢迎访问、关注、评论 并留下你的小心心?