保障 Promise 循环执行的时序

最新推荐文章于 2024-11-13 17:05:40 发布

fish_04818

最新推荐文章于 2024-11-13 17:05:40 发布

阅读量139

点赞数

CC 4.0 BY-SA版权

文章标签： javascript es6 前端

本文链接：https://blog.youkuaiyun.com/fish_04818/article/details/121009028

这篇博客探讨了如何在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();