Promise.all使用困惑：推入数组时函数提前执行，如何实现排队？

我太懂你这种困惑了！当初我第一次用Promise.all的时候也踩过一模一样的坑——本来以为要等到调用Promise.all才会触发任务，结果刚把Promise塞进数组，任务就已经跑起来了，那Promise.all不就只剩等结果的份了？

为什么会提前执行？ #

核心原因很简单：Promise实例一旦被创建，就会立即执行内部的异步逻辑，和Promise.all完全没关系。比如你写const p = fetch('/api')，这行代码一执行，网络请求就已经发出去了，p只是这个请求的Promise实例而已，后面把它传给Promise.all，只是在等它的结果，而不是触发它执行。

怎么实现“排队到调用时再执行”？ #

办法就是把每个异步任务包装成返回Promise的函数（也就是所谓的“Promise工厂函数”），这样你塞进数组的是函数，而不是已经执行的Promise实例。只有当你主动调用这些函数时，才会创建Promise并触发异步逻辑。

举个直观的例子：

错误的写法（任务提前执行）

// 这里两行fetch一执行，请求立刻就发出去了
const promises = [
  fetch('/api/user'),
  fetch('/api/posts')
];

// 这时候请求早就跑起来了，Promise.all只是在等结果
Promise.all(promises)
  .then(results => console.log(results));

正确的写法（控制执行时机）

// 把每个任务包装成函数，只有调用时才会创建Promise
const promiseFactories = [
  () => fetch('/api/user'),
  () => fetch('/api/posts')
];

// 等你想执行的时候，再调用所有工厂函数，拿到Promise实例后传给Promise.all
Promise.all(promiseFactories.map(factory => factory()))
  .then(results => console.log(results));

带参数的任务怎么处理？ #

如果你的异步任务需要传参数，用闭包或者bind就能搞定：

// 带参数的工厂函数
const fetchData = (id) => fetch(`/api/data/${id}`);
const fetchWithOptions = (url, options) => fetch(url, options);

// 把参数提前绑定好，或者用闭包包装
const factories = [
  () => fetchData(123),
  () => fetchWithOptions('/api/settings', { method: 'POST', body: JSON.stringify({ theme: 'dark' }) })
];

// 调用时直接执行就行
Promise.all(factories.map(f => f()));

这样一来，你就完全掌握了任务的执行时机——可以等页面加载完成、用户点击按钮，或者任何你需要的条件满足后，再调用Promise.all触发所有异步任务，真正实现“排队等待执行”的效果。

内容的提问来源于stack exchange，提问作者Mankind1023