map/forEach循环里async、await为什么会失效

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

第一次在forEach循环里写请求用了async和await后，发现请求并没有同步执行（也就是async和await没有生效），真的是百思不得其解，下面就说一下为什么会这样和解决方法。

一、为什么map/forEach循环里async、await没有生效

原因：map/forEach内部使用了while结合callback方式来执行函数，await不会等待callback的执行
示例如下：

    const arr = [1, 2, 3, 4];
    
    const request = (num) => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(num);
          console.log(`执行${num}`);
        }, 1000);
      });
    };

    //forEach循环请求(这种方式有问题)
    arr.forEach(async (v) => {
      console.log('调用请求之前', v);
      const res = await request(v);
      console.log('调用请求之后', v);
    });

运行结果如下：

而我们期望的是如下：

二、解决方法

1.用for循环

   const handleRequest = async () => {
      for (let i = 0; i < arr.length; i++) {
        console.log('调用请求之前', arr[i]);
        const res = await request(arr[i]);
        console.log('调用请求之后', arr[i]);
      }
    };
   handleRequest();

2.用promise.all()

 const handleRequest = async () => {
      const resArr = await Promise.all(
        arr.map(async (v) => {
          const res = await request(v);
          console.log(`调用请求之后,${res}`);
          return res;
        })
      );
      return resArr;
   };
  handleRequest();

总结

工作中遇到的小问题，有什么不对的地方还请给与评价