JavaScript Promises：嵌套then链中return为何改变结果顺序？

你疑惑的核心是Promise链的衔接规则：then回调的返回值会决定下一个then什么时候执行。先拆解两段代码的执行流程：

首先明确foo函数的行为：调用foo(num)会立刻打印num，然后返回一个等待num秒后才会resolve的Promise。

代码1（加return的情况） #

function foo(num) {
  console.log(num)
  return new Promise(resolve => setTimeout(resolve, num * 1000));
}

foo(1).then(() => {
  return foo(2).then(() => {
    console.log(4)
  });
}).then(() => {
  foo(3)
})

执行步骤：

1. 调用foo(1)，立刻打印1，返回1秒后resolve的Promise。
2. 1秒后第一个then回调触发：这里return了foo(2).then(...)这个Promise，意味着整个Promise链会暂停，等待这个返回的Promise完成。
3. 调用foo(2)，立刻打印2，返回2秒后resolve的Promise。
4. 2秒后foo(2)的Promise resolve，执行内部then回调打印4，此时第一个then返回的Promise也完成了。
5. 紧接着触发下一个then回调，调用foo(3)打印3。

最终输出顺序：1 → 2 → 4 → 3

代码2（不加return的情况） #

function foo(num) {
  console.log(num)
  return new Promise(resolve => setTimeout(resolve, num * 1000));
}

foo(1).then(() => {
  foo(2).then(() => {
    console.log(4)
  });
}).then(() => {
  foo(3)
})

执行步骤：

1. 同样调用foo(1)，打印1，1秒后resolve。
2. 1秒后第一个then回调触发：这里调用了foo(2).then(...)但没有return这个Promise，所以这个then回调执行完后（只是启动了一个异步任务），默认返回undefined，Promise链会直接认为这个阶段完成了。
3. 立刻触发下一个then回调，调用foo(3)打印3。
4. 2秒后foo(2)的Promise resolve，执行内部then回调打印4。

最终输出顺序：1 → 2 → 3 → 4

核心结论 #

• 在then回调里return一个Promise，相当于把这个异步任务接入了主Promise链，后续的then必须等它完成才会执行。
• 如果不return，内部的Promise就成了独立的异步任务，和主Promise链并行执行，后续then不会等它，自然就打乱了执行顺序。

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