手写一个符合 Promise/A+ 规范的 Promise

一、基础结构：状态与 resolve/reject

Promise 的主要是状态机。我们定义三种状态：pendingfulfilledrejected。按理说，初始为 pending一旦改变就不能 变化。

class MyPromise {
constructor {
this.state = 'pending';// 当前状态
this.value = null;// 存储结果
fn，不过，}
resolve = => {
if return;// 状态已定，不再执行
this.value = value;this.state = 'fulfilled';}
reject = => {
if return;this.value = value;this.state = 'rejected';}
}

注意：resolve 和 reject 使用箭头函数定义。确保 this 指向实例，避免作为回调传递时丢失。

二、实现 n 的基本要求

.n 方法必须返回一个新的 Promise，而且其回调要在微任务中执行。这一步常被忽视，导致链式调用不按预期执行。

n {
const nextPromise = new MyPromise => {
if {
queueMicrotask => {
const res = onFulfilled;resolve，});}
})，return nextPromise;}

此时仅处理了 'fulfilled' 状态，且没有存储回调——这正是许多实现缺陷所在。

三、支持异步：回调队列

A+ 规范要求如果 .n 在 .resolve/.reject 之前被调用，则需要把回调存起来等后续状态确定时再执行。否则会出现“先执行 n 后执行 resolve”的奇怪行为。老实说，

constructor {
// ...
this.fulfilledCallback =;怎么说呢，// 存储 n 的成功回调
this.rejectedCallback =;// 存储 n 的失败回调
}
n {
const nextPromise = new MyPromise => {
if { // 尚未确定状态
this.fulfilledCallback.push => { // 保存成功回调
const res = onFulfilled;resolve，});} else if { // 已确定为成功
queueMicrotask => {
const res = onFulfilled;resolve，});}
})，return nextPromise;}
resolve 内部遍历并执行队列里的回调：
resolve = => {
if return;this.value = value;this.state = 'fulfilled';const callbacks = this.fulfilledCallback.slice;// 防止并发修改
this.fulfilledCallback.length = 0;// 清空队列
for {
queueMicrotask => cb);}
此逻辑解决了“先 .n 后 .resolve”导致的同步/异步混乱问题。

四、完善 n 方法：处理 onRejected 与不同状态分支

A+ 明确规定 .n 接受两个参数；若不是函数，应使用默认处理器以保证链式继续。话说回来，错误处理不当会导致异常被吞掉或未捕获。
n {
// 默认值处理
if
onFulfilled = value => value;不过，if
onRejected = error => { throw error };const nextPromise =
new MyPromise => {
if { // 等待结果
this.fulfilledCallback.push => {
this.executorTryAndCatch(
onFulfilled。resolve,reject,this.value,nextPromise);})，this.rejectedCallback.push => {
executorTryAndCatch(
onRejected。resolve,reject,this.value,nextPromise);})，} else if { // 已成功
queueMicrotask => {
executorTryAndCatch(
onFulfilled。resolve,reject,this.value,nextPromise);})，} else { // 已失败
queueMicrotask => {
executorTryAndCatch(
onRejected。resolve,reject,this.value,nextPromise);})，}
});说起来，return nextPromise;}

五、提取公共逻辑 executorTryAndCatch

This helper handles:


Error capture：`try/catch` wraps callback execution.

Circular reference detection：`res === nextPromise` throws.

PROMISE resolution：If `res` is a promise it waits for it.

executorTryAndCatch{
try{
const res=onFunction;
if
throw new TypeError;if
res.n，else
resolve;}catch{
reject;}
}

六、实现 catch 方法
catch{
return this.n;}

七、最终完整代码与测试
class MyPromise{
constructor{
this.state='pending';this.value=null;this.fulfilledCallback=;this.rejectedCallback=;fn，老实说，}
resolve==>{
ifreturn;this.value=value;this.state='fulfilled';const cbs=this.fulfilledCallback.slice;this.fulfilledCallback.length=0;for{queueMicrotask=>cb);}
}
reject==>{
ifreturn;this.value=value;this.state='rejected';const cbs=this.rejectedCallback.slice;this.rejectedCallback.length=0;for{queueMicrotask=>cb);}
}
n{
ifonF=v=>v;ifonR=e=>{throw e};const nxt=new MyPromise=>{
if{
this.fulfilledCallback.push=>{
this.executorTryAndCatch;})，this.rejectedCallback.push=>{
this.executorTryAndCatch;})，}else if{
queueMicrotask=>{
this.executorTryAndCatch;})，}else{
queueMicrotask=>{
this.executorTryAndCatch;})，}
});return nxt，怎么说呢，}
catch{return this.n;}
executorTryAndCatch{
try{
const r=fn;ifthrow new TypeError;r instanceof MyPromise?r.n:res，}catch{rj;}
}
}
// ---------- 测试 ----------
const p=new MyPromise=>setTimeout=>res,100));const t=p.n.catch).n.finally=>{
console.log;})，t.n);

说到输出示例，

finally
final result:4


八、与常见痛点归纳


状态不可逆：'pending' → 

异步保证：'queueMicrotask' 或类似机制确保所有 `.n` 回调在下一轮事件循环执行。

链式调用完整性：.n 必须返回新 Promise 并正确解析返回值。

错误穿透 & 捕获：`try/catch` 包裹使用者代码，并通过 `reject` 把异常传播到后续链条。

🚫‍⚠


开发者常见痛点汇总： 
• **A+ 与 ES6 标准差异**：A+ 中 `` 对比 ES6 的 `` 有细节差别，如 `]` 步骤顺序。初学者往往直接复制 ES6 示例，却忽略了 A+ 对于 `` 的严格要求。• **`.catch` 与 `.finally` 的误用**：很多人误认为 `.finally` 会捕获异常，而它只是无论成败都执行一次。若想捕获需显式 `.catch` 或使用第二个参数的 `.n`。• **循环引用导致堆栈溢出**：如 `promise1.n=>promise1)` 会死循环，需手动检测并抛出 `TypeError`。• **未处理非函数默认值**：如果传入非函数会导致运行时错误或无返回值。需要做类型检查并提供默认行为，否则链条会被打断。• **微任务与宏任务混乱**：理解何时使用 `setTimeout`,`process.nextTick`。或 `queueMicrotask` 对于预期行为很关键，否则可能出现 “立即同步” vs “延迟微任务” 的不一致表现。话说回来，
*以上内容参考官方 A+ 文档及 MDN 实现细节。*