如何确保一个 Promise 在另一个 Promise 完成后才开始执行？-js教程-PHP中文网

如何确保一个 Promise 在另一个 Promise 完成后才开始执行？

JavaScript 中 Promise 默认立即执行，若想实现严格串行（第二个任务在第一个完成后才启动），必须在第一个 Promise 的 then 回调或 await 后动态创建第二个 Promise，而非提前声明。

javascript 中 promise 默认立即执行，若想实现严格串行（第二个任务在第一个完成后才启动），必须在第一个 promise 的 `then` 回调或 `await` 后动态创建第二个 promise，而非提前声明。

在 JavaScript 异步编程中，一个常见误区是：误以为将已创建的 Promise 传入 .then() 就能实现“等待后再执行”。实际上，Promise 构造函数中的执行器（executor）会在 Promise 实例化时立即同步执行——也就是说，task2 在代码顶部声明时，其 setTimeout 已经启动计时，与 task1 完全并行。

? 问题复现与根源分析

观察原始代码：

const task1 = new Promise((res, rej) => {
  setTimeout(() => res('one'), 5000)
})

const task2 = new Promise((res, rej) => {
  setTimeout(() => res('two'), 5000) // ⚠️ 此处已启动！与 task1 无关
})

task2 在定义时就已开始计时，因此无论 task1 是否完成，它都会在约 5 秒后 resolve。这就是为什么 .then(() => Promise.resolve(task2)) 和 await task2 都在第 5 秒输出 'two'——它们只是“获取”了一个早已运行中的 Promise，而非“触发”一个新任务。

✅ 正确做法：延迟创建第二个 Promise

要实现真正的串行执行（总耗时 ≈ 10 秒），必须将第二个 Promise 的创建逻辑放在第一个 Promise 的完成回调中：

方式一：链式 `.then()`（推荐用于简单流程）

const promiseTime = 500;
const start = performance.timeOrigin + performance.now();

const task1 = new Promise((res) => {
  setTimeout(() => res('one'), promiseTime);
});

task1
  .then((x) => {
    console.log(`${x} ${(performance.now() + performance.timeOrigin) - start}ms`);
    // ✅ 动态创建 task2 —— 此时才开始计时
    return new Promise((res) => {
      setTimeout(() => res('two'), promiseTime);
    });
  })
  .then((x) => {
    console.log(`${x} ${(performance.now() + performance.timeOrigin) - start}ms`);
  });

// 输出示例：
// one 502.34ms
// two 1008.76ms

方式二：`async/await`（语义更清晰，适合复杂逻辑）

async function runSequentially() {
  const start = performance.timeOrigin + performance.now();

  const res1 = await new Promise((res) => {
    setTimeout(() => res('one'), 500);
  });
  console.log(`${res1} ${(performance.now() + performance.timeOrigin) - start}ms`);

  const res2 = await new Promise((res) => {
    setTimeout(() => res('two'), 500);
  });
  console.log(`${res2} ${(performance.now() + performance.timeOrigin) - start}ms`);
}

runSequentially();

? 关键原则：Promise 的“启动时机”由其构造函数执行时刻决定，而非 .then() 或 await 的调用时刻。

⚠️ 注意事项

不要提前声明依赖型 Promise（如 const task2 = new Promise(...)），除非你明确需要并行。

若需复用同一逻辑多次，可封装为工厂函数：

const createDelayedTask = (value, delay) => 
  () => new Promise(res => setTimeout(() => res(value), delay));

task1.then(() => createDelayedTask('two', 500)());