UP | HOME

async/await与forEach

首先使用forEach在Javascript里遍历一个数组,先上代码

const returnNum = x => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(x);
    }, 500);
  });
};

const example = async () => {
  const nums = [1,2,3];
  nums.forEach(async num => {
   const result = await returnNum(num);
   console.log(result);
  });
  console.log('after forEach');
};

example().then(() =>{
  console.log('done');
});

运行结果是

after forEach
done
1
2
3

但是我们期望的运行结果是

1
2
3
after foreach
done

这里使用 for...of 来修复这个问题,代码如下:

const returnNum = x => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(x);
    }, 500);
  });
};

const example = async () => {
  const nums = [1,2,3];
  for (const num of nums) {
   const result = await returnNum(num);
   console.log(result);
  };
  console.log('after forEach');
};

example().then(() =>{
  console.log('done');
});

为什么使用 for...of 可以正常运行而 forEach 不能呢?这是因为 forEach 期望的是一个同步函数,它不会对返回值做任何事情,它仅仅是按顺序一个一个调用函数。 for...of 会对函数的返回值做实际的 await 等待。

Date: 2019-05-06 Mon 21:33

Author: shixiongfei

Created: 2020-09-05 Sat 14:40

Emacs 27.1 (Org mode 9.3)