JavaScript中Promise的then()调用函数方法及执行差异解析

1. 如何在Promise的then()方法内部调用函数？ #

在then()里调用函数主要有两种实用方式，根据参数需求和执行时机选择：

• 直接传递函数引用：如果函数不需要自定义参数，或者可以接收上一个Promise的resolve值作为参数，直接传函数名即可。比如：

  .then(myFunction)
  

  此时myFunction会在then()触发时被调用，参数是上一个Promise的resolve结果。
• 用箭头函数包裹调用：如果需要传递自定义参数，或者要确保函数在then()触发时才执行（避免提前执行），就用箭头函数包裹：

  .then(() => myFunction(1000, 'customArg'))
  

  箭头函数会在then()触发时执行，再调用目标函数，同时能自由控制参数。
• 如果函数本身返回Promise，以上两种方式都能让then()等待这个Promise完成后，再执行下一个链式调用。

2. 三段代码执行结果差异解析 #

核心差异在于：then()方法需要接收回调函数，而非直接传入Promise或立即执行函数调用。下面逐段拆解：

第一段代码 #

awaitFor(2000)
  .then(() => console.log('Executing promise 1'))
  .then(() => awaitFor(2000))
  .then(() => console.log('Executing promise 2'))

执行流程：

1. 调用awaitFor(2000)，等待2秒后resolve。
2. 第一个then()触发，打印日志，返回undefined。
3. 第二个then()执行箭头函数，调用awaitFor(2000)生成新Promise，then()会等待这个Promise的2秒延迟完成。
4. 第三个then()触发，打印日志。
   总耗时约4秒，顺序：等待2s → 打印1 → 等待2s → 打印2。

第二段代码 #

awaitFor(2000)
  .then(() => console.log('Executing promise 1'))
  .then(awaitFor)
  .then(() => console.log('Executing promise 2'))

这里then(awaitFor)是把awaitFor函数作为回调传给then()，而非立即执行。then()会把上一个回调的返回值（这里是undefined）传给awaitFor，但因为awaitFor有默认参数2000，依然生成2秒的Promise。
执行流程和第一段完全一致，总耗时约4秒，结果相同。

第三段代码 #

awaitFor(2000)
  .then(() => console.log('Executing promise 1'))
  .then(awaitFor(2000))
  .then(() => console.log('Executing promise 2'))

问题出在then(awaitFor(2000))：这里是立即执行awaitFor(2000)，把它返回的Promise传给了then()。而then()如果接收的不是函数，会将这个Promise包装成resolved状态的Promise（或直接等待其完成，但执行时机已提前）。
执行流程：

1. 代码执行时，同时启动两个awaitFor(2000)的计时（第一个是链式起点，第二个是立即调用的）。
2. 2秒后，第一个awaitFor完成，触发第一个then()打印日志；此时第二个awaitFor也刚好完成，第二个then()直接触发，第三个then()立刻打印日志。
   总耗时约2秒，顺序：等待2s → 打印1 → 立刻打印2，完全没有等待第二个awaitFor的延迟（因为它和第一个同时开始）。

关于传递参数的问题 #

如果你想给awaitFor传自定义参数，同时让then()等待它完成，不能直接写then(awaitFor(2000))，必须用箭头函数包裹：

.then(() => awaitFor(1000)) // 自定义参数1000，且在第一个then完成后才调用

这样awaitFor会在then()触发时才执行，then()也会等待它返回的Promise完成，保证链式调用的顺序。

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