JavaScript篇：Promise.all()：让你的异步代码像开了挂一样快！

江城开朗的豌豆
896 阅读4分钟

        大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。

        我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。

大家好，我是前端开发工程师小杨。今天要聊的是 Promise.all() ，一个能让多个异步任务并行执行的超强工具。

如果你经常遇到这样的场景：

  • 同时请求多个API，等所有数据回来再渲染页面
  • 批量上传文件，等全部传完再提示用户
  • 并行处理多个任务，等全部完成再执行下一步

那 Promise.all() 绝对是你的最佳选择！

1. Promise.all() 是什么？

简单来说，Promise.all() 可以同时执行多个 Promise，并且等它们全部成功后才返回结果。如果其中有一个失败，整个 Promise.all() 就会立刻 reject。

语法：

Promise.all([promise1, promise2, promise3, ...])
  .then(results => {
    // 所有 Promise 都成功时执行
  })
  .catch(error => {
    // 任意一个 Promise 失败时执行
  });

2. 举个🌰：同时请求用户数据和订单数据

假设我们要在页面加载时，同时获取用户信息和订单列表，如果用传统方式，可能会这样写：

// 传统方式（串行，慢！）
fetch('/api/user/我')
  .then(user => {
    fetch('/api/orders/我')
      .then(orders => {
        console.log(user, orders); // 拿到所有数据
      });
  });

这样写的问题是：第二个请求必须等第一个完成，效率太低！

用 Promise.all() 优化

// 并行请求，速度快！
const userPromise = fetch('/api/user/我');
const ordersPromise = fetch('/api/orders/我');

Promise.all([userPromise, ordersPromise])
  .then(([userData, ordersData]) => {
    console.log(userData, ordersData); // 同时拿到两个数据！
  })
  .catch(error => {
    console.error('有一个请求失败了！', error);
  });

优点：
✅ 两个请求同时发送，不用互相等待
✅ 代码更简洁，逻辑更清晰
✅ 错误处理更统一

3. 进阶用法：动态 Promise 数组

有时候我们需要处理动态数量的 Promise，比如批量上传文件：

const files = [file1, file2, file3]; // 假设是用户上传的文件列表
const uploadPromises = files.map(file => uploadFile(file)); // 生成多个上传 Promise

Promise.all(uploadPromises)
  .then(() => {
    alert('所有文件上传成功！');
  })
  .catch(error => {
    alert(`上传失败：${error.message}`);
  });

这样，不管用户上传多少个文件，都能统一处理成功/失败的情况。

4. 注意事项

  1. 只要有一个失败，整个 Promise.all 就失败

    • 如果希望即使部分失败也能拿到其他成功的结果，可以用 Promise.allSettled()（ES2020）。

  2. Promise.all([]) 会立即 resolve

    • 如果传入空数组，它会直接返回 []，而不是挂起。

  3. 适用于并行任务，但不适合有依赖关系的任务

    • 如果某个任务需要前一个任务的结果，还是用 async/await 串行处理更好。

5. 总结

Promise.all() 是处理多个并行异步任务的神器，能大幅提升代码效率。

适用场景：
✔ 同时请求多个API
✔ 批量上传/下载文件
✔ 并行计算多个数据

不适用场景：
❌ 任务之间有依赖关系
❌ 需要部分成功时继续执行（改用 Promise.allSettled()）

🚀 试试看吧！  下次遇到多个异步任务时，别再用 then 嵌套了，试试 Promise.all()，让你的代码跑得更快！

如果你有其他有趣的用法，欢迎在评论区分享~ 👇

avatar
文章
阅读
粉丝