保障 Promise 循环执行的时序

这篇博客探讨了如何在JavaScript中使用Promise.all处理多个异步操作,并通过示例展示了与for...of循环的异步执行区别。文章详细解释了Promise.all如何等待所有Promise实例完成,并在所有任务完成后执行after函数。同时,对比了使用for...of循环逐个执行异步任务,以及在每个任务完成后调用after函数的情况。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用 Promise.all

const arr = [1, 2, 3, 4, 5, 6, 7, 8];

const p = (seconds) =>
  new Promise((resolve) => {
    console.log(`created promise: ${seconds}`);
    setTimeout(() => {
      resolve(seconds);
    }, seconds * 1000);
  });

const after = () => {
  setTimeout(() => {
    console.log('after');
  }, 300);
}

const queue = async () => {
  await Promise.all(arr.map(async item => {
    const seconds = await p(item);
    console.log(`executed each promise ${seconds}`);
    after();
    return;
  }));
}

queue();

使用 for … of

const arr = [1, 2, 3, 4, 5, 6, 7, 8];

const p = (seconds) =>
  new Promise((resolve) => {
    setTimeout(() => {
      console.log(seconds);
      resolve(seconds);
    }, seconds * 2000);
  });

const after = (result) => {
  setTimeout(() => {
    console.log(`${result} after`);
  }, 300);
}

async function show(item) {
  for (const second of arr) {
    const result = await p(second);
    after(result);
  }
}

show();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值