javascript - 关于forEach里的异步？

Question

以下这段代码为何先输出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);

Answer 1

直接用 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;    }}

Answer 2

使用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();

Answer 3

不如在外面加个 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);})

Answer 4

在外包裹一层 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);})();

Answer 5

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

Answer 6

关于forEach里的异步？

以下这段代码为何先输出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);

对于你提出的问题，原因在于 forEach 遍历数组时是异步的，而 await 关键字则会暂停当前的 async 函数并等待 Promise 完成后继续执行。因此，当 forEach 遍历到第二个元素时，它不会等待第一个 Promise 完成就开始执行第二个，以此类推。因此，你看到的是先输出 222，然后是所有的 111。

如果你想让 111 先输出，你可以使用 for...of 循环代替 forEach，因为 for...of 会等待 Promise 完成后再继续下一次循环。修改后的代码如下：

for (const el of this.items) {    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);