关于forEach里的异步？

• Z时代
• 2024-02-28
• 分类：IT

以下这段代码为何先输出222，后输出111，如果想让111先输出应如何修改？

  this.items.forEach(async el => {
      await ApiHelper.post(`/mainData/selectDateByCd/${el.cd}`)
          .then(response => {
            console.log("111");
            if (response.data.length > 0) {
              this.flag = true;
            }
          })
          .catch(err => {
            err;
          });
  })
  console.log(222);

回答：

MDN有这么一段话
要解决可以使用for、for...of、for await...of

回答：

在外包裹一层 Promise，可以确保执行顺序。

这种情况下，解决方案不唯一，我偏向于 Promise.all() + Array.map() 配合使用。

(async () => {
  await Promise.all(
    [10, 20, 30].map((el) => {
      return new Promise((resolve) => {
        setTimeout(() => {
          // console.log("111");
          console.log(el);
          resolve(el);
        }, 100 * el);
      });
    })
  );
  console.log(222);
})();

回答：

不如在外面加个 Promise

let  Promise = new Promise((res,rej)=>{
   this.items.forEach(async el => {
        await ApiHelper.post(`/mainData/selectDateByCd/${el.cd}`)
            .then(response => {
              console.log("111");
              res(1)
              if (response.data.length > 0) {
                this.flag = true;
              }
            })
            .catch(err => {
              err;
            });
    })
 })
Promise.then(()=>{
    console.log(222);
})

回答：

使用promise.all:

async function processData() {
  const promises = this.items.map(el => {
    return ApiHelper.post(`/mainData/selectDateByCd/${el.cd}`)
      .then(response => {
        console.log("111");
        if (response.data.length > 0) {
          this.flag = true;
        }
      })
      .catch(err => {
        err;
      });
  });
  await Promise.all(promises);
  console.log(222);
}
processData();

或者使用for of

async function processData() {
  const promises = this.items.map(el => {
    return ApiHelper.post(`/mainData/selectDateByCd/${el.cd}`)
      .then(response => {
        console.log("111");
        if (response.data.length > 0) {
          this.flag = true;
        }
      })
      .catch(err => {
        err;
      });
  });
  await Promise.all(promises);
  console.log(222);
}
processData();

回答：

直接用 for ... of 就好，何必要去折腾 forEach()。另外，既然已经用了 await，就不需要再用 then 了。

for (const el of this.items) {
    try {
        const response = await ApiHelper.post(`/mainData/selectDateByCd/${el.cd}`);
        console.log("111");
        if (response.data.length > 0) {
            this.flag = true;
        }
    } catch (err) {
        console.log(err);
    }
}

如果不想用 try...catch，用 .catch() 来处理错误也可以。把有错误的用 catch() 处理掉之后，返回个正常值出来（没返回就是 undefined，注意在取到 response 值的时候进行区分处理，下面的代码是用 ?. 来处理的）

for (const el of this.items) {
    const response = await ApiHelper.post(`/mainData/selectDateByCd/${el.cd}`)
        .catch(err => {
            console.log(err);
            // return undefined;
        });
    if (response?.data.length > 0) {
        this.flag = true;
    }
}

以上是 关于forEach里的异步？ 的全部内容， 来源链接： utcz.com/p/935259.html