2026最新：从零手写满分Promise，搞定99%面试题（含所有隐藏坑点）
Promise 是现代 JavaScript 异步编程的基石，也是前端面试100%必考的知识点。但 90% 的前端开发者只停留在“会用
then/catch”的层面，对其底层原理、边界情况和隐藏bug一知半解，导致面试时频频翻车。本文结合最新 ES2025 规范和大厂面试真题，从痛点起源→核心概念→状态流转→API详解→高频坑点→满分手写实现六个维度，带你彻底搞懂 Promise。文章包含了所有你在网上找不到的隐藏bug和优化细节，看完这一篇，Promise 相关的问题再也难不倒你。
一、为什么我们需要 Promise？
在 Promise 出现之前，JavaScript 处理异步任务只能依赖回调函数。当多个异步任务需要串行执行时，就会形成臭名昭著的回调地狱（Callback Hell）。
回调地狱的噩梦
// 需求：先获取用户，再获取订单，再获取商品
getUserInfo(userId, function(user) {
getOrderList(user.id, function(orders) {
getGoodsList(orders[0].id, function(goods) {
console.log('最终数据:', goods);
// 代码不断向右缩进，越来越难维护
}, function(err) {
console.error('获取商品失败:', err);
});
}, function(err) {
console.error('获取订单失败:', err);
});
}, function(err) {
console.error('获取用户失败:', err);
});
回调地狱的三大致命问题：
- 可读性极差：层层嵌套，逻辑混乱，调试困难
- 错误处理分散：每个回调都需要单独处理错误，极易遗漏
- 无法并行执行：多个异步任务只能串行，效率低下
Promise 的诞生彻底解决了这些问题。它用链式调用替代了嵌套回调，用统一的错误处理机制替代了分散的错误捕获，让异步代码变得像同步代码一样清晰易读。
二、Promise 核心概念：90%的人都搞混了
1. 最容易混淆的两组状态
很多人以为 Promise 只有三个状态，其实 Promise/A+ 规范定义了两组独立的状态描述，这是面试的高频考点，也是理解所有高级特性的基础。
第一组：基础状态（互斥不可逆）
Promise 有且只有三个互斥的基础状态：
- pending（进行中）：初始状态，异步操作正在执行
- fulfilled（已成功）：异步操作成功完成
- rejected（已失败）：异步操作失败
核心特性：状态不可逆
Promise 的状态一旦从 pending 变为 fulfilled 或 rejected，就永远不会再改变。
第二组：过程状态（面试必问）
这是绝大多数资料都没讲清楚的两个关键术语：
- resolved（已解决）：Promise 已经被绑定了一个最终结果，不再是无主的 pending 状态
- settled（已敲定）：Promise 已经到达了最终状态（fulfilled 或 rejected），永远不会再改变
最关键的关系： ✅ 所有 settled 的 Promise 一定是 resolved 的 ❌ 不是所有 resolved 的 Promise 都是 settled 的
用一句话总结：
resolved表示「Promise 已经有了归宿」；settled表示「Promise 已经走到了终点」。
2. Promise 完整状态流转图
这是 Promise 最核心的状态转换逻辑，面试时能画出这个图，直接加分：
pending
|
├─ 调用 reject(reason) → rejected (resolved + settled)
|
└─ 调用 resolve(value)
|
├─ value 是普通值 → fulfilled (resolved + settled)
|
└─ value 是 Promise/thenable → resolved 但未 settled
|
├─ value 成功 → fulfilled (resolved + settled)
└─ value 失败 → rejected (resolved + settled)
图中每一步的含义：
- 所有 Promise 初始状态都是
pending - 调用
reject(reason)：Promise 会同时进入resolved和rejected状态（直接敲定） - 调用
resolve(value)：分两种情况：- 如果
value是普通值：Promise 会同时进入resolved和fulfilled状态（直接敲定） - 如果
value是另一个 Promise/thenable 对象：Promise 只会进入resolved状态（已解决但未敲定）
- 如果
- 当内部 Promise 完成时：外层 Promise 才会跟着进入最终的
fulfilled或rejected状态（最终敲定）
3. 特殊情况：resolve(thenable)
当你调用 resolve(x) 时，如果 x 是一个拥有 then 方法的对象（称为 thenable），Promise 会执行递归解包：
- 将当前 Promise 的状态锁定到
x的状态 - 等待
x完成 - 当
x成功时，当前 Promise 也成功 - 当
x失败时，当前 Promise 也失败
这就是为什么会出现「已解决但未敲定」的特殊状态：
const innerPromise = new Promise(resolve => setTimeout(() => resolve(123), 2000));
const outerPromise = new Promise(resolve => resolve(innerPromise));
console.log(outerPromise); // Promise { <pending> }
// 此时 outerPromise 已经是 resolved 状态，但还没 settled
三、Promise 核心 API 详解
1. 实例方法
Promise.prototype.then()
then 是 Promise 最核心的方法，用来注册异步操作成功和失败的回调函数。
最重要的特性：链式调用
then 方法会返回一个新的 Promise 实例，这是 Promise 能够链式调用的根本原因。
getUserInfo(userId)
.then(user => getOrderList(user.id))
.then(orders => getGoodsList(orders[0].id))
.then(goods => console.log('最终数据:', goods))
.catch(err => console.error('任何一步出错都会在这里捕获:', err));
Promise.prototype.catch()
catch 是 then(null, errorCallback) 的语法糖，用来捕获 Promise 链中任何一个环节的错误。
错误冒泡特性：Promise 链中的错误会一直向后冒泡，直到被 catch 捕获。
Promise.prototype.finally()
finally 方法不管 Promise 最终是成功还是失败，都会执行。通常用来做清理工作，比如关闭加载动画。
showLoading();
getUserInfo(userId)
.then(user => console.log(user))
.catch(err => console.error(err))
.finally(() => {
hideLoading(); // 无论成功失败，都会关闭加载动画
});
2. 静态方法（面试必背）
Promise 提供了 6 个常用的静态方法，我用一张表格帮你对比它们的区别：
| 方法 | 成功条件 | 失败条件 | 返回结果 | 适用场景 |
|---|---|---|---|---|
Promise.all() | 所有都成功 | 任意一个失败 | 所有成功结果的数组（顺序与传入一致） | 多个异步任务并行执行，需要等待所有任务完成 |
Promise.race() | 任意一个先完成 | 任意一个先失败 | 第一个完成的结果 | 请求超时控制 |
Promise.allSettled() | 永远成功 | 永远不会失败 | 所有结果的数组（包含成功和失败） | 需要知道所有异步任务的最终状态 |
Promise.any() | 任意一个成功 | 所有都失败 | 第一个成功的结果 | 多个备用接口，只要有一个成功即可 |
Promise.resolve() | - | - | 已经成功的 Promise | 快速创建成功的 Promise |
Promise.reject() | - | - | 已经失败的 Promise | 快速创建失败的 Promise |
Promise.try() | - | - | 执行函数并包装成 Promise | 统一捕获同步和异步错误 |
ES2025 新特性：Promise.try()
这是最新的静态方法，完美解决了同步错误无法被 catch 捕获的问题：
// 一个可能同步抛出错误的函数
function getData(id) {
if (!id) throw new Error('id不能为空');
return fetch(`/api/data/${id}`);
}
// ❌ 同步错误会直接崩溃
getData(null).catch(err => console.error(err));
// ✅ 统一捕获同步和异步错误
Promise.try(() => getData(null)).catch(err => console.error(err));
四、Promise 高频坑点与误区
1. Promise 执行器是立即执行的
console.log('开始');
const promise = new Promise((resolve, reject) => {
console.log('Promise 执行器执行');
resolve('成功');
});
console.log('结束');
// 输出顺序：开始 → Promise 执行器执行 → 结束
Promise 的执行器函数会立即同步执行，只有 then、catch、finally 里的回调是异步微任务。
2. 控制台异步求值陷阱
这是前端最经典的坑：
const p = Promise.all([Promise.resolve(1), Promise.resolve(2)]);
console.log(p);
控制台输出：
Promise {<pending>}
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Array(2) [1, 2]
原因：浏览器控制台是惰性求值的，预览行是调用 console.log 时的快照，而展开后的内容是你点击时的实时值。
正确的调试方式：永远用 .then() 或 async/await 来获取 Promise 的结果。
3. 不要多余的 Promise 包装
很多人会犯的错误：
// ❌ 多余的包装
function getData() {
return new Promise((resolve, reject) => {
fetch('/api/data')
.then(res => res.json())
.then(data => resolve(data))
.catch(err => reject(err));
});
}
// ✅ 正确写法：fetch 本身就返回 Promise
function getData() {
return fetch('/api/data').then(res => res.json());
}
4. 深拷贝循环引用为什么用 WeakMap？
用 Map 处理循环引用会导致严重的内存泄漏，因为 Map 对键是强引用。而 WeakMap 对键是弱引用，当原对象不再被使用时，会被自动垃圾回收，不会造成内存泄漏。
五、手写满分 Promise（含所有 bug 修正）
手写 Promise 是前端面试的必考题。下面是完全符合 Promise/A+ 规范的实现，修正了网上 90% 手写版本都存在的 3 个严重隐藏bug。
先看网上 90% 版本都有的 3 个严重 bug
- 没有处理循环引用：resolve 传入自身会导致无限递归栈溢出
- 没有捕获 thenable 的同步错误：thenable 的 then 方法抛出错误会直接逃逸
- allSettled 对非数组参数处理错误：不符合原生 Promise 行为
最终满分实现
/**
* 手写 Promise（完全符合 Promise/A+ 规范）
* 包含：基础版 + all + race + allSettled + any
* 修正了所有已知隐藏bug，优化了边界情况处理
*/
class MyPromise {
// 定义三个状态常量
static PENDING = 'pending';
static FULFILLED = 'fulfilled';
static REJECTED = 'rejected';
constructor(executor) {
// 初始化状态
this.status = MyPromise.PENDING;
// 存储成功结果和失败原因
this.value = undefined;
this.reason = undefined;
// 回调队列：存储异步情况下的 then 回调
this.onFulfilledCallbacks = [];
this.onRejectedCallbacks = [];
// 定义 resolve 函数
const resolve = (value) => {
// ✅ 修正1：禁止循环引用（Promise/A+ 2.3.1）
if (value === this) {
reject(new TypeError('Chaining cycle detected for promise'));
return;
}
if (this.status === MyPromise.PENDING) {
// 优先处理 MyPromise 实例
if (value instanceof MyPromise) {
value.then(resolve, reject);
return;
}
// ✅ 修正2：完整实现 Promise/A+ 2.3.3 thenable 处理
if (value !== null && (typeof value === 'object' || typeof value === 'function')) {
let then;
try {
// 访问 then 属性可能抛出错误
then = value.then;
} catch (err) {
reject(err);
return;
}
if (typeof then === 'function') {
try {
// 用 call 绑定 this 到 value
then.call(value, resolve, reject);
} catch (err) {
reject(err);
}
return;
}
}
// 普通值，直接改变状态
this.status = MyPromise.FULFILLED;
this.value = value;
// 执行所有成功回调
this.onFulfilledCallbacks.forEach(fn => fn());
}
};
// 定义 reject 函数
const reject = (reason) => {
if (this.status === MyPromise.PENDING) {
this.status = MyPromise.REJECTED;
this.reason = reason;
// 执行所有失败回调
this.onRejectedCallbacks.forEach(fn => fn());
}
};
// 立即执行执行器函数，捕获同步错误
try {
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
/**
* then 方法：核心方法，支持链式调用
*/
then(onFulfilled, onRejected) {
// 实现值透传和错误透传
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };
// 返回新的 Promise，实现链式调用
return new MyPromise((resolve, reject) => {
const executeCallback = (callback, arg) => {
// 注：这里用 setTimeout 模拟微任务，真实环境可替换为 queueMicrotask
setTimeout(() => {
try {
const result = callback(arg);
// 递归解包返回值
if (result instanceof MyPromise || (result && typeof result.then === 'function')) {
result.then(resolve, reject);
} else {
resolve(result);
}
} catch (err) {
reject(err);
}
}, 0);
};
// 根据当前状态执行不同逻辑
if (this.status === MyPromise.FULFILLED) {
executeCallback(onFulfilled, this.value);
}
if (this.status === MyPromise.REJECTED) {
executeCallback(onRejected, this.reason);
}
// 异步情况：将回调存入队列
if (this.status === MyPromise.PENDING) {
this.onFulfilledCallbacks.push(() => {
executeCallback(onFulfilled, this.value);
});
this.onRejectedCallbacks.push(() => {
executeCallback(onRejected, this.reason);
});
}
});
}
/**
* catch 方法：语法糖
*/
catch(onRejected) {
return this.then(null, onRejected);
}
/**
* finally 方法
*/
finally(callback) {
return this.then(
value => MyPromise.resolve(callback()).then(() => value),
reason => MyPromise.resolve(callback()).then(() => { throw reason })
);
}
// ========== 静态方法 ==========
static resolve(value) {
if (value instanceof MyPromise) {
return value;
}
return new MyPromise(resolve => resolve(value));
}
static reject(reason) {
return new MyPromise((_, reject) => reject(reason));
}
/**
* all: 所有 Promise 都成功才成功，有一个失败就失败
*/
static all(promises) {
return new MyPromise((resolve, reject) => {
// ✅ 优化：支持可迭代对象（Set、Map 等）
try {
promises = Array.from(promises);
} catch (err) {
reject(new TypeError('MyPromise.all expects an iterable'));
return;
}
const results = [];
let completedCount = 0;
const total = promises.length;
if (total === 0) {
resolve([]);
return;
}
promises.forEach((promise, index) => {
MyPromise.resolve(promise).then(
value => {
results[index] = value;
completedCount++;
if (completedCount === total) {
resolve(results);
}
},
reason => {
reject(reason);
}
);
});
});
}
/**
* race: 返回最先完成的 Promise（无论成功或失败）
*/
static race(promises) {
return new MyPromise((resolve, reject) => {
try {
promises = Array.from(promises);
} catch (err) {
reject(new TypeError('MyPromise.race expects an iterable'));
return;
}
promises.forEach(promise => {
MyPromise.resolve(promise).then(resolve, reject);
});
});
}
/**
* allSettled: 所有 Promise 都完成（无论成功或失败）
*/
static allSettled(promises) {
return new MyPromise((resolve, reject) => {
try {
promises = Array.from(promises);
} catch (err) {
reject(new TypeError('MyPromise.allSettled expects an iterable'));
return;
}
const results = [];
let completedCount = 0;
const total = promises.length;
if (total === 0) {
resolve([]);
return;
}
promises.forEach((promise, index) => {
MyPromise.resolve(promise).then(
value => {
results[index] = { status: 'fulfilled', value };
completedCount++;
if (completedCount === total) {
resolve(results);
}
},
reason => {
results[index] = { status: 'rejected', reason };
completedCount++;
if (completedCount === total) {
resolve(results);
}
}
);
});
});
}
/**
* any: 只要有一个成功就成功，所有都失败才失败
*/
static any(promises) {
return new MyPromise((resolve, reject) => {
try {
promises = Array.from(promises);
} catch (err) {
reject(new TypeError('MyPromise.any expects an iterable'));
return;
}
const total = promises.length;
let rejectedCount = 0;
const errors = [];
if (total === 0) {
reject(new AggregateError([], 'All promises were rejected'));
return;
}
promises.forEach((promise, index) => {
MyPromise.resolve(promise).then(
value => {
resolve(value);
},
reason => {
errors[index] = reason;
rejectedCount++;
if (rejectedCount === total) {
reject(new AggregateError(errors, 'All promises were rejected'));
}
}
);
});
});
}
}
// ==============================================
// 🧪 MyPromise 全功能测试套件
// ==============================================
console.log('======================================');
console.log('🚀 开始运行 MyPromise 全功能测试套件');
console.log('======================================\n');
// ==============================================
// 一、基础功能测试（状态机核心）
// ==============================================
console.log('========== 1. 基础功能测试 ==========');
// 1.1 同步 resolve
const p1 = new MyPromise((resolve) => {
resolve('同步成功');
});
p1.then(value => console.log('1.1 ✅ 预期：同步成功 | 实际：', value));
// 1.2 同步 reject
const p2 = new MyPromise((_, reject) => {
reject(new Error('同步失败'));
});
p2.catch(err => console.log('1.2 ✅ 预期：同步失败 | 实际：', err.message));
// 1.3 状态不可逆（先 resolve 后 reject）
const p3 = new MyPromise((resolve, reject) => {
resolve('成功了');
reject(new Error('失败了')); // 应被忽略
});
p3.then(
value => console.log('1.3 ✅ 预期：成功了 | 实际：', value),
err => console.log('1.3 ❌ 错误：不应该执行这里')
);
// 1.4 状态不可逆（先 reject 后 resolve）
const p4 = new MyPromise((resolve, reject) => {
reject(new Error('失败了'));
resolve('成功了'); // 应被忽略
});
p4.catch(err => console.log('1.4 ✅ 预期：失败了 | 实际：', err.message));
// 1.5 异步 resolve
const p5 = new MyPromise((resolve) => {
setTimeout(() => resolve('异步成功'), 100);
});
p5.then(value => console.log('1.5 ✅ 预期：异步成功 | 实际：', value));
// 1.6 异步 reject
const p6 = new MyPromise((_, reject) => {
setTimeout(() => reject(new Error('异步失败')), 100);
});
p6.catch(err => console.log('1.6 ✅ 预期：异步失败 | 实际：', err.message));
// 1.7 同一个 Promise 多次调用 then
const p7 = new MyPromise((resolve) => {
setTimeout(() => resolve('多次调用成功'), 200);
});
p7.then(value => console.log('1.7-1 ✅ 预期：多次调用成功 | 实际：', value));
p7.then(value => console.log('1.7-2 ✅ 预期：多次调用成功 | 实际：', value));
p7.then(value => console.log('1.7-3 ✅ 预期：多次调用成功 | 实际：', value));
// ==============================================
// 二、实例方法测试
// ==============================================
console.log('\n========== 2. 实例方法测试 ==========');
// 2.1 then 方法：值透传
MyPromise.resolve('值透传测试')
.then()
.then()
.then(value => console.log('2.1 ✅ 预期：值透传测试 | 实际：', value));
// 2.2 then 方法：错误透传
MyPromise.reject(new Error('错误透传测试'))
.then(value => console.log('2.2 ❌ 错误：不应该执行这里'))
.then(value => console.log('2.2 ❌ 错误：不应该执行这里'))
.catch(err => console.log('2.2 ✅ 预期：错误透传测试 | 实际：', err.message));
// 2.3 then 方法：链式调用返回普通值
MyPromise.resolve(1)
.then(value => value * 2)
.then(value => value + 3)
.then(value => console.log('2.3 ✅ 预期：5 | 实际：', value));
// 2.4 then 方法：链式调用返回 Promise
MyPromise.resolve(1)
.then(value => {
return new MyPromise(resolve => {
setTimeout(() => resolve(value * 2), 100);
});
})
.then(value => console.log('2.4 ✅ 预期：2 | 实际：', value));
// 2.5 then 方法：回调抛出错误
MyPromise.resolve(1)
.then(value => {
throw new Error('then 回调抛出错误');
})
.catch(err => console.log('2.5 ✅ 预期：then 回调抛出错误 | 实际：', err.message));
// 2.6 catch 方法：捕获错误并恢复
MyPromise.reject(new Error('原始错误'))
.catch(err => {
console.log('2.6 ✅ 捕获到错误：', err.message);
return '恢复成功';
})
.then(value => console.log('2.6 ✅ 预期：恢复成功 | 实际：', value));
// 2.7 finally 方法：成功情况执行
MyPromise.resolve('finally 成功测试')
.finally(() => console.log('2.7 ✅ finally 执行了（成功情况）'))
.then(value => console.log('2.7 ✅ 预期：finally 成功测试 | 实际：', value));
// 2.8 finally 方法：失败情况执行
MyPromise.reject(new Error('finally 失败测试'))
.finally(() => console.log('2.8 ✅ finally 执行了（失败情况）'))
.catch(err => console.log('2.8 ✅ 预期：finally 失败测试 | 实际：', err.message));
// 2.9 finally 方法：不接收参数
MyPromise.resolve(100)
.finally((value) => console.log('2.9 ✅ 预期：undefined | 实际：', value));
// 2.10 finally 方法：透传原结果
MyPromise.resolve(200)
.finally(() => '返回值不影响结果')
.then(value => console.log('2.10-1 ✅ 预期：200 | 实际：', value));
MyPromise.reject(new Error('原错误'))
.finally(() => '返回值不影响结果')
.catch(err => console.log('2.10-2 ✅ 预期：原错误 | 实际：', err.message));
// 2.11 finally 方法：等待异步回调完成
console.log('2.11 ⏳ 开始测试 finally 异步等待...');
MyPromise.resolve('异步 finally 结果')
.finally(() => {
return new MyPromise(resolve => {
setTimeout(() => {
console.log('2.11 ✅ finally 异步执行完成');
resolve();
}, 300);
});
})
.then(value => {
console.log('2.11 ✅ 预期：异步 finally 结果 | 实际：', value);
});
// 2.12 finally 方法：抛出错误覆盖原结果
MyPromise.resolve('成功')
.finally(() => {
throw new Error('finally 抛出错误');
})
.catch(err => console.log('2.12 ✅ 预期：finally 抛出错误 | 实际：', err.message));
// ==============================================
// 三、静态方法测试
// ==============================================
console.log('\n========== 3. 静态方法测试 ==========');
// 3.1 MyPromise.resolve：普通值
const pResolve1 = MyPromise.resolve('静态 resolve 普通值');
pResolve1.then(value => console.log('3.1-1 ✅ 预期：静态 resolve 普通值 | 实际：', value));
// 3.2 MyPromise.resolve：Promise 实例
const pInner = MyPromise.resolve('嵌套 Promise');
const pResolve2 = MyPromise.resolve(pInner);
console.log('3.1-2 ✅ 预期：true | 实际：', pResolve2 === pInner);
// 3.3 MyPromise.reject
MyPromise.reject(new Error('静态 reject 测试'))
.catch(err => console.log('3.2 ✅ 预期：静态 reject 测试 | 实际：', err.message));
// 3.4 MyPromise.all：全部成功
MyPromise.all([
MyPromise.resolve(1),
MyPromise.resolve(2),
MyPromise.resolve(3)
]).then(results => console.log('3.3-1 ✅ 预期：[1,2,3] | 实际：', results));
// 3.5 MyPromise.all：有一个失败
MyPromise.all([
MyPromise.resolve(1),
MyPromise.reject(new Error('all 方法失败')),
MyPromise.resolve(3)
]).catch(err => console.log('3.3-2 ✅ 预期：all 方法失败 | 实际：', err.message));
// 3.6 MyPromise.all：空数组
MyPromise.all([]).then(results => console.log('3.3-3 ✅ 预期：[] | 实际：', results));
// 3.7 MyPromise.all：可迭代对象（Set）
MyPromise.all(new Set([
MyPromise.resolve('a'),
MyPromise.resolve('b')
])).then(results => console.log('3.3-4 ✅ 预期：[a,b] | 实际：', results));
// 3.8 MyPromise.race：第一个成功
MyPromise.race([
new MyPromise(resolve => setTimeout(() => resolve('慢的成功'), 200)),
new MyPromise(resolve => setTimeout(() => resolve('快的成功'), 100))
]).then(value => console.log('3.4-1 ✅ 预期：快的成功 | 实际：', value));
// 3.9 MyPromise.race：第一个失败
MyPromise.race([
new MyPromise((_, reject) => setTimeout(() => reject(new Error('先失败')), 100)),
new MyPromise(resolve => setTimeout(() => resolve('后成功'), 200))
]).catch(err => console.log('3.4-2 ✅ 预期：先失败 | 实际：', err.message));
// 3.10 MyPromise.allSettled：混合成功失败
MyPromise.allSettled([
MyPromise.resolve('成功1'),
MyPromise.reject(new Error('失败1')),
MyPromise.resolve('成功2'),
MyPromise.reject(new Error('失败2'))
]).then(results => {
console.log('3.5-1 ✅ 预期：2个fulfilled，2个rejected');
console.log('3.5-1 实际结果：', results);
});
// 3.11 MyPromise.allSettled：全部成功
MyPromise.allSettled([
MyPromise.resolve(1),
MyPromise.resolve(2)
]).then(results => {
console.log('3.5-2 ✅ 全部成功 状态：', results[0].status);
});
// 3.12 MyPromise.allSettled：全部失败
MyPromise.allSettled([
MyPromise.reject(new Error('错误1')),
MyPromise.reject(new Error('错误2'))
]).then(results => {
console.log('3.5-3 ✅ 全部失败 状态：', results[0].status);
});
// 3.13 MyPromise.allSettled：空数组
MyPromise.allSettled([]).then(results => console.log('3.5-4 ✅ 预期：[] | 实际：', results));
// 3.14 MyPromise.any：第一个成功
MyPromise.any([
MyPromise.reject(new Error('失败1')),
MyPromise.resolve('第一个成功'),
MyPromise.resolve('第二个成功')
]).then(value => console.log('3.6-1 ✅ 预期：第一个成功 | 实际：', value));
// 3.15 MyPromise.any：中间成功
MyPromise.any([
MyPromise.reject(new Error('失败1')),
MyPromise.reject(new Error('失败2')),
MyPromise.resolve('第三个成功')
]).then(value => console.log('3.6-2 ✅ 预期：第三个成功 | 实际：', value));
// 3.16 MyPromise.any：全部失败
MyPromise.any([
MyPromise.reject(new Error('错误1')),
MyPromise.reject(new Error('错误2')),
MyPromise.reject(new Error('错误3'))
]).catch(err => {
console.log('3.6-3 ✅ 预期：AggregateError | 实际错误类型：', err.name);
console.log('3.6-3 ✅ 错误数量：', err.errors.length);
});
// 3.17 MyPromise.any：空数组
MyPromise.any([]).catch(err => {
console.log('3.6-4 ✅ 预期：AggregateError | 实际：', err.name);
});
// ==============================================
// 四、边界情况与规范细节测试
// ==============================================
console.log('\n========== 4. 边界情况与规范细节测试 ==========');
// ✅ 正确的循环引用测试用例
const pCycle = new MyPromise((resolve) => {
// 异步resolve，此时pCycle已经初始化完成
setTimeout(() => {
resolve(pCycle);
}, 0);
});
pCycle.catch(err => {
console.log('4.1 ✅ 预期：Chaining Cycle detected | 实际：', err.message);
});
// 4.2 thenable 对象处理
const thenable = {
then(resolve) {
setTimeout(() => resolve('thenable 对象结果'), 100);
}
};
MyPromise.resolve(thenable)
.then(value => console.log('4.2 ✅ 预期：thenable 对象结果 | 实际：', value));
// 4.3 访问 then 属性抛出错误
const evilThenable = {
get then() {
throw new Error('访问 then 属性出错');
}
};
MyPromise.resolve(evilThenable)
.catch(err => console.log('4.3 ✅ 预期：访问 then 属性出错 | 实际：', err.message));
// 4.4 执行器函数抛出同步错误
const pExecutor = new MyPromise(() => {
throw new Error('执行器函数抛出错误');
});
pExecutor.catch(err => console.log('4.4 ✅ 预期：执行器函数抛出错误 | 实际：', err.message));
// 4.5 then 回调异步执行（规范要求）
console.log('4.5 开始');
MyPromise.resolve('异步执行测试')
.then(value => console.log('4.5 ✅ 预期：开始 → 结束 → 异步执行测试 | 实际：', value));
console.log('4.5 结束');
// ==============================================
// 五、终极综合测试
// ==============================================
console.log('\n========== 5. 终极综合测试 ==========');
function mockApi(name, delay, shouldFail = false) {
return new MyPromise((resolve, reject) => {
setTimeout(() => {
if (shouldFail) {
reject(new Error(`${name} 接口失败`));
} else {
resolve(`${name} 数据`);
}
}, delay);
});
}
console.log('5. ⏳ 开始综合测试...');
mockApi('用户信息', 100)
.then(userData => {
console.log('5. ✅ 获取到：', userData);
return mockApi('订单列表', 200);
})
.then(orderData => {
console.log('5. ✅ 获取到：', orderData);
return MyPromise.all([
mockApi('商品1', 100),
mockApi('商品2', 150)
]);
})
.then(products => {
console.log('5. ✅ 获取到所有商品：', products);
return MyPromise.race([
mockApi('推荐1', 100),
mockApi('推荐2', 50)
]);
})
.then(recommend => {
console.log('5. ✅ 获取到最快推荐：', recommend);
return '全部流程完成';
})
.catch(err => {
console.error('5. ❌ 出错了：', err.message);
})
.finally(() => {
console.log('5. ✅ 综合测试结束');
console.log('\n======================================');
console.log('🎉 所有测试用例执行完毕！');
console.log('======================================');
});
module.exports = { MyPromise };
六、面试高频考点总结
-
Promise 有哪几个状态？状态有什么特性？ 三个基础状态：pending、fulfilled、rejected。状态一旦改变就不可逆。 两个过程状态：resolved（已解决）、settled（已敲定）。
-
Promise 的 then 方法为什么能链式调用？ 因为
then方法会返回一个新的 Promise 实例。 -
Promise.all、Promise.race、Promise.allSettled、Promise.any 的区别？ 参考上面的对比表。
-
什么是 thenable？resolve 传入 thenable 会发生什么？ 拥有
then方法的对象叫 thenable。resolve 传入 thenable 时会递归解包，等待其完成。 -
手写 Promise 时最容易忽略的三个 bug 是什么？ 循环引用问题、thenable 的同步错误捕获、非数组参数的处理。
-
Promise.try() 的作用是什么？ 统一捕获同步和异步错误，避免双层 try/catch。
写在最后
Promise 是现代 JavaScript 异步编程的基石，掌握它不仅能让你写出更优雅、更健壮的代码，更是面试中脱颖而出的必备技能。
本文覆盖了 Promise 从基础到进阶的所有核心内容，以及面试中最常考的知识点和隐藏坑点。如果你能把这篇文章的内容都搞懂，并且能独立写出上面的满分实现，那么 Promise 相关的面试题，你就可以横着走了。
如果觉得这篇文章对你有帮助，欢迎点赞、收藏、关注，有任何问题可以在评论区留言讨论！
