JavaScript异步函数pending与fulfilled状态Promise解析及代码验证

今天咱们来拆解这段关于async函数和Promise状态的代码，搞清楚每个函数的逻辑以及为啥会出现那些执行结果。

一、两个async函数的返回差异 #

先看这两个核心的async函数：

async function pending() { return new Promise((resolve, reject) => { resolve(1) }); }
async function fulfilled() { return 1; }

• 对于pending()：它直接返回了一个手动创建的Promise对象。虽然这个Promise内部立刻调用了resolve(1)，但Promise的决议操作会被放入微任务队列，在当前同步代码执行完后才会执行。所以在同步代码阶段，这个Promise的状态是pending。
• 对于fulfilled()：它返回的是普通值1，async函数会自动把这个值包装成一个已完成（fulfilled）状态的Promise，状态直接敲定，值为1。

二、promiseState：检测Promise状态的核心逻辑 #

这个函数是用来判断一个Promise当前处于什么状态的，咱们来拆解它的实现：

function promiseState(p) { 
  return Promise.race([ 
    Promise.resolve(p).then(() => "fulfilled", () => "rejected"), 
    Promise.resolve().then(() => "pending") 
  ]); 
}

它利用了Promise.race()的特性：传入的Promise数组中，哪个Promise先决议，就返回哪个的结果。里面的两个Promise分工明确：

1. 第一个Promise：Promise.resolve(p).then(...)
   • 先把传入的p标准化为Promise（如果p已经是Promise就直接复用），然后绑定回调：如果p最终完成就返回"fulfilled"，失败就返回"rejected"。但这个回调的执行时机取决于p的状态。
2. 第二个Promise：Promise.resolve().then(() => "pending")
   • Promise.resolve()是一个已完成的Promise，它的回调会被放入微任务队列，在当前同步代码结束后立刻执行。

状态判定的关键逻辑： #

• 如果p已经是fulfilled（比如fulfilled()返回的Promise）：第一个Promise的回调会和第二个Promise的回调同时进入微任务队列，但因为p已经完成，第一个回调会先触发，race就会返回"fulfilled"。
• 如果p当前是pending（比如pending()返回的Promise）：第一个Promise的回调需要等待p完成才能执行，而第二个Promise的回调会先执行，race就会先拿到"pending"，从而检测出当前p处于pending状态。

三、示例执行结果详解 #

咱们逐个看调用的输出：

1. promiseState(pending()).then(s => { console.log(s); }); // pending
   • 调用pending()返回的Promise此时还处于pending状态（内部的resolve(1)要等同步代码跑完才执行）。promiseState里的race中，第二个Promise的回调先执行，所以返回"pending"，最终输出pending。
2. promiseState(fulfilled()).then(s => { console.log(s); }); // fulfilled
   • fulfilled()返回的是已完成的Promise，第一个Promise的回调会先触发，race返回"fulfilled"，最终输出fulfilled。
3. pending().then(r => { console.log(r); }); // 1
   • 虽然pending()返回的Promise一开始是pending，但它最终会在微任务队列中执行resolve(1)，所以then回调会拿到结果1，输出1。

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