欢迎大家关注公众号：程序员蜡笔熊，期待与您的讨论！

接着上一篇文章继续写：

本篇内容。让上篇的 MiniPromise 支持链式调用，而且符合 Promise/A+ 规范。这个规范有 19 个测试用例，达到目标是一个都不挂。按理说，

上篇的 MiniPromise 能跑异步、有 catch/finally 的 mini Promise。但它丢了一个 Promise 最主要的能力：链式调用。

链式调用示例 & 痛点剖析

为什么需要链式调用？

痛点：很多同学在实际项目中发现。.n 只能执行一次后续的回调根本挂不上，导致代码不可读、难维护。

下面是链式调用示例：

fetch
.n => res.json) // 第一个 n 返回新 Promise
.n => fetch) // 第二个 n
.n => res.json) // 第三个 n
.catch;

每一个 .n 都返回一个全新的 Promise后一个 .n 是挂在这个新 Promise 上的。这就是链的精髓，

n 必须返回一个新 Promise

什么是「新 Promise」？

看这个代码这方面，

const p1 = Promise.resolve;const p2 = p1.n => v + 1);console.log，// false 不是同一个对象！

.n 不会修改原来的 Promise，而是创建一个新的 Promise。新 Promise 的状态由回调的返回值决定。

动手实现

n {
// 关键：n 返回一个新的 Promise 实例
const promise2 = new MiniPromise => {
if {
// 执行成功回调，用返回值 resolve promise2
const x = onFulfilled;resolve，}
if {
const x = onRejected;resolve，// 注意：错误被处理了promise2 是 fulfilled
}
if {
this.onFulfilledCallbacks.push => {
const x = onFulfilled;resolve，});this.onRejectedCallbacks.push => {
const x = onRejected;resolve，});}
})，return promise2;}

验证链式调用

const p = new MiniPromise => resolve);p.n => {
console.log;return v + 1;})
.n => {
console.log;return v + 1;})
.n => {
console.log;})，

能跑了,但还有两个问题需要解决。老实说，

不传回调也能传递值 —— 值穿透

原生 Promise 的神奇行为

Promise.resolve
.n // 没传任何回调！.n // 还是没传
.n => console.log);// 输出 hello

痛点：很多新人误以为必须每一步都写回调，否则链会中断。未传递的回调会自动“穿透”。其实，如果没有提供成功回调，值会直接向下传递；如果没有提供失败回调，错误也会向下传播直至最近的 .catch.

实现值穿透

• 说到成功默认回调， => v
• 失败默认回调这方面。 => { throw e }

实现代码片段

n {
// 值穿透处理
onFulfilled = typeof onFulfilled === 'function'?onFulfilled : => value;onRejected = typeof onRejected === 'function'?onRejected : => { throw err;}，const promise2 = new MiniPromise => {
if {
try {
const x = onFulfilled;resolve，} catch { reject;}
}
if {
try {
const x = onRejected;resolve，老实说，} catch { reject;}
}
if {
this.onFulfilledCallbacks.push => {
try { const x = onFulfilled;resolve，}
catch { reject;}
})，其实，this.onRejectedCallbacks.push => {
try { const x = onRejected;resolve，}
catch { reject;}
})，}
});
return promise2;
}

验证穿透效果

// 成功值穿透
const p = new MiniPromise => resolve);p.n
.n
.n => console.log);// 'hello' ✅
// 错误穿透
const p2 = new MiniPromise => reject);p2.n=>v)
.n=>v)
.catch=>console.log);// '错误' ✅

捕获验证

new MiniPromise=>resolve)
.n=>{ throw new Error;})
.n=>console.log)
.catch=>console.log);// 捕获: 中间炸了

Promise解析过程——主要难点解密

问题出在哪？

痛点：A+规范要求当 .n.resolve,导致后续链提前结束。

Promise.resolve
.n=>{
return new Promise=>resolve,1000));})
.n)，/* 正确行为：1 秒后打印结果 */

The buggy implementation did:

const x = onFulfilled;// x 是一个 Promise 对象
resolve;// ❌ 把整个对象当作普通值传下去了

A+规范对解析过程的定义

The core idea:If a callback returns a promise,wait for that promise to settle before moving to next .n.

detailed resolvePromise 实现

/**
* Promise解析过程 —— 主要中的主要
* @param {Promise} promise2 - n 返回的那个新 Promise
* @param {*} x - 回调函数的返回值
* @param {Function} resolve - promise2 的 resolve
* @param {Function} reject - promise2 的 reject
*/
function resolvePromise{
// 循环引用检测
if{
return reject);}
let called=false;if){
try{
const n=x.n;// 拿到可能的 n 方法
if{
n.call(
x,y=>{ // 成功回调 →
递归解析 y
ifreturn;called=true，resolvePromise;},r=>{ // 拒绝回调 → 拒绝 promise2
ifreturn;called=true，reject;}
)，}else{
// 普通对象，没有 n 方法，直接完成
resolve;}
}catch{
ifreturn;called=true，reject;}
}else{
// 基础类型直接完成
resolve;}
}

Simplified scenario breakdown

• x 为普通值：→ #resolve
• x 为普通对象：→ 同上直接完成。
• x 为另一个 Promise/Thenable：→ 调用其 .n 并递归解析。
• x===promise2 ： → 报错 TypeError。

Pseudocode integration into .n javascript // 略 ... see full integration later But we will show final integrated version later.

验证返回 Promise 时的行为

javascript new MiniProm ise =>res olve) .th en(v=>{ console.l og;return new MiniP romise=>re solve,1000);})，}) .th en;})，// → 一秒后打印 “second”

循环引用检测

javascript const p= newMiniProm ise);const p22=p.n=> p22 );p22.ca tch)，// Chaining cycle detected ✅

高级嵌套测试

javascript newMiniP romise) .th en(v=>{ return newMiniP romise(r=>{ r esolve( newMiniP romise(r=>{ r esolve( newMiniP romise); )})，);})，}) .th en);// ✅ 多层递归展开成功

完整实现 & 与 promises‑aplus‑tests 对齐

完整代码

// my-promise.js
const PENDING='pending';老实说，const FULFILLED='fulfilled';const REJECTED='rejected';/** Resolve procedure according to A+ */
function resolvePo nse{
if{return rej ec t);}
let called=false;if){
try{
const th en=x.th en;if{
th en.call(
x,y=>{ifreturn;called=true，resolvePromise;},r=>{ifreturn;called=true，reject;}
)，}else{
resol ve;}
}catch{ifreturn;called=true，reject;}
}else{
resol ve;}
}
class MyProm ise{
constructor{
this.state=PEND ING;this.value=undefin ed;this.reason=undefi ned;this.onF ulfilledCallbacks=;this.onR ejectedCallbacks=;const resol ve==>{
if{
this.state=FULFILL ED;话说回来，this.value=value;this.onF ulfilledCallbacks.forEach);}
}，const reje ct==>{
if{
this.state=REJEC TED;this.reason=reason;this.onR ejectedCallbacks.forEach);}
}，try{executor;}catch{reject;}
}
n{
onF ulfilled=typeof onF ulfilled==='function'?onF ulfilled:=>v;onRe jected=typeof onRe jected==='function'?onRe jected:=>{throw e;}，const prom ise2=new MyProm ise=>{
const fulfilledTask==>setTimeout=>{
try{
const x=onF ulfilled;resolvePo nse;}catch{reject;}
})，不过，const rejectedTask==>setTimeout=>{
try{
const x=onRe jected;resolvePo nse;}catch{reject;}
})，if{fulfilledTask;}
else if{rejectedTask;}
else{
this.onF ulfilledCallbacks.push;this.onR ejectedCallbacks.push;}
})，return prom ise2;}
catch{
return this.n;话说回来，}
}
// Export for A+ test suite
module.exports={
deferred{
let reso。lve,reje ct，const prom ise=new MyProm ise=>{reso,lve=r;rej ect=e，});return{promise:prom ise。resolve:reso lve,reject:rej ect};}
}，​ 

运行官方测试套件

在项目根目录执行以下命令即可看到全部通过：

npm i promises‑aplus‑tests --save-dev
npx promises‑aplus‑tests my‑promise.js
​ 

若出现 “passing” 则说明已经完美符合 A+ 标准！🎉

实战练手题目

至于练习一。实现 delay

function delay{
return new MyProm ise=>resolve,ms));}
delay
.th en;return delay;})
.th en，return delay;})
.th en，// 每500ms依次打印：步
​ 

练习二：请求重试函数

/** * 请求重试 * @param {Function} fn - 返回 MyPromise 的请求函数 * @param {number} times - 最大重试次数 * @param {number} delayMs - 重试间隔 */ function retry{
return new MyProm ise=>{
function attempt{
fn.t hen.c atch(err=>{
if{reject;}else{
console.l og;delay.t hen=>attempt);}
})，说起来，}
attempt;})，}
​
// 模拟不稳定请求 let count=0;function unstableRequest{ return new MyProm ise=>{   setTimeout=>{     count++;if{         reject);} else {         resolv;}   },200)，});}
retry.t hen;// 第 1 次失败，第 2 次失败…，最终打印 “成功！”​
​ 

练习三：顺序执行一组任务

/ ** * 顺序执行 MyPromise 数组 */ function sequence{
return tasks.reduce(
=>prev.t hen.t hen(res=>{
results.push;return results;})),MyProm ise.reso lve);}
// 示例任务集合 const tasks=;sequence.t hen);怎么说呢，// 👉 注意：MyProm ise 尚未实现 static resolve。需要在下一篇补全，​ 

小结 ： 这篇文章实现了符合 A+ 标准的完整 mini‑Promise，主要两点是：

1. `n` 必须返回全新实例 – 链式调用基石。
2. `resolvePo nse` 完整解析 – 正确处理 nable、循环引用、异常等边界。
/ ol>

当前实现已。但仍有待完善之处，例如：

• setTimeout ​ / microtask 差异导致时序细微不同。
• static methods 如 `Promise.resolve / all / race` 尚未实现。
• `async/await` 背后的内部机制仍待探索。
​ /ul> ―――――――――――――
从面试官问你来看，“你对JavaScript里关于Promises有什么了解？”这道题很容易卡住因为大多数人只说出了 以下给你列出一些关键提问和回答：

面试题

第１题

闹闹.......

请把下面

[请把正文内容重新排版

Continue ...

---