JavaScript中混用await与then/catch处理Promise的行为探究

先看你给出的示例代码：

await thisReturnsAPromise()
  .then(() => /* do something */)
  .catch(() => /* do something */);

针对你的疑问逐一解答：

1. 是否会对Promise进行两次等待？ #

不会。thisReturnsAPromise()返回的原始Promise只会被解析一次。then/catch只是给这个Promise注册回调函数，不是“等待”操作。await等待的是整个then/catch链式调用最后返回的那个新Promise，整个流程是：原始Promise完成 → 触发对应回调（then或catch） → 回调执行后生成新Promise → await等待这个新Promise完成，才会继续执行后续代码。

2. then方法返回的是新Promise，还是原Promise？ #

then和catch每次调用都会返回全新的Promise实例，和原始Promise完全独立。这个新Promise的状态由回调函数的执行结果决定：

• 如果回调返回普通值，新Promise会以该值resolve；
• 如果回调返回另一个Promise，新Promise会等待这个Promise的状态变更，继承其最终结果；
• 如果回调抛出错误，新Promise会以该错误reject。

3. await和then的执行顺序与延迟问题 #

await会在then回调执行完成后才完成解析，二者不会同时完成。具体流程是：

1. 原始Promise resolve/reject → 将then/catch的回调加入微任务队列；
2. 当前同步代码执行完毕后，取出微任务队列中的回调执行；
3. 回调执行完成后，then返回的新Promise状态变更；
4. await感知到这个新Promise的状态变化，将后续代码加入微任务队列，等待执行。

这个过程中的延迟是JavaScript事件循环的微任务调度导致的，时间极短，几乎可以忽略，但逻辑上then回调一定先于await后续代码执行。

awaitResult的返回值是什么？ #

看这段代码：

const awaitResult = await thisReturnsAPromise() // returns a Promise<number>
  .then((thenResult) => /* do something */)
  .catch(() => /* do something */);

awaitResult的最终值由then或catch回调的返回值决定：

• 如果原始Promise成功resolve：执行then回调，awaitResult等于then回调的返回值（如果回调没有写return，默认返回undefined）；
• 如果原始Promise失败reject：执行catch回调，awaitResult等于catch回调的返回值（同样无return则为undefined）；
• 如果then/catch回调返回了另一个Promise：await会等待这个Promise完成，最终拿到它resolve的值（如果这个Promise reject，且没有后续catch，则会抛出错误）。

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