Promise通过状态机解决异步回调地狱，其核心为三种不可逆状态与then链式调用，借助微任务实现异步执行，并通过resolvePromise处理返回值，支持链式传递与错误捕获。
Promise 是 JavaScript 中处理异步操作的核心机制之一。它解决了传统回调函数带来的“回调地狱”问题，让异步代码更清晰、可读性更强。本文将从使用方式入手，逐步深入到 Promise 的基本实现原理，帮助你全面理解其工作机制。
Promise 的基本使用
Promise 表示一个异步操作的最终完成或失败，以及其返回的结果值。它有三种状态：
- pending（进行中）：初始状态，既没有完成也没有失败。
- fulfilled（已成功）：操作成功完成。
- rejected（已失败）：操作失败。
一旦状态从 pending 变为 fulfilled 或 rejected，就不会再改变。
创建一个 Promise 实例：
立即学习“Java免费学习笔记（深入）”；
const myPromise = new Promise((resolve, reject) => {
// 异步操作
setTimeout(() => {
const success = true;
if (success) {
resolve('操作成功');
} else {
reject('操作失败');
}
}, 1000);
});
通过 then 方法注册成功和失败的回调：
myPromise
.then(value => {
console.log(value); // 输出: 操作成功
})
.catch(error => {
console.error(error);
});
catch 方法用于捕获错误，等价于 then(null, rejection)。finally 方法则在 Promise 结束后执行，不论成功或失败，适合做清理工作。
Promise 链式调用与异步流程控制
Promise 支持链式调用，每个 then 返回一个新的 Promise，从而避免嵌套回调。
fetchData()
.then(data => process(data))
.then(result => save(result))
.then(() => console.log('保存成功'))
.catch(err => console.error('出错:', err));
注意：在 then 中返回普通值会作为下一个 Promise 的输入；返回新的 Promise 时，后续 then 会等待其完成。
常见场景如顺序请求多个接口：
getUser() .then(user => getUserPosts(user.id)) .then(posts => displayPosts(posts)) .catch(showError);
Promise 常用静态方法
ES6 提供了几个有用的静态方法来简化异步操作管理：
- Promise.resolve(value)：返回一个以给定值解析后的 Promise。
- Promise.reject(reason)：返回一个以给定原因为拒因的 Promise。
- Promise.all(iterable)：所有 Promise 都成功才成功，任意一个失败则整体失败。
- Promise.race(iterable)：返回最先完成（无论成功或失败）的 Promise 结果。
- Promise.allSettled(iterable)：等待所有 Promise 完成，返回它们的结果数组（包含 status 和 value/reason）。
- Promise.any(iterable)：返回第一个 fulfilled 的 Promise，全部失败才 reject。
例如使用 Promise.all 并行加载资源：
Promise.all([
fetch('/api/user'),
fetch('/api/config'),
loadScript('/utils.js')
])
.then(results => {
console.log('所有资源加载完成');
})
.catch(err => {
console.error('至少一个请求失败', err);
});
简易 Promise 源码实现
为了理解 Promise 内部机制，我们可以实现一个简化版的 Promise 类。
核心要点：
- 状态不可逆（pending → fulfilled / rejected）
- 支持 then 方法链式调用
- 异步执行回调（使用 queueMicrotask 或 setTimeout 模拟）
- 处理 then 回调的返回值（特别是 Promise）
function MyPromise(executor) {
this.state = 'pending';
this.value = undefined;
this.reason = undefined;
this.onFulfilledCallbacks = [];
this.onRejectedCallbacks = [];
const resolve = (value) => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
this.onFulfilledCallbacks.forEach(fn => fn());
}
};
const reject = (reason) => {
if (this.state === 'pending') {
this.state = 'rejected';
this.reason = reason;
this.onRejectedCallbacks.forEach(fn => fn());
}
};
try {
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
MyPromise.prototype.then = function(onFulfilled, onRejected) {
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val;
onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };
const promise2 = new MyPromise((resolve, reject) => {
if (this.state === 'fulfilled') {
queueMicrotask(() => {
try {
const x = onFulfilled(this.value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
});
}
if (this.state === 'rejected') {
queueMicrotask(() => {
try {
const x = onRejected(this.reason);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
});
}
if (this.state === 'pending') {
this.onFulfilledCallbacks.push(() => {
queueMicrotask(() => {
try {
const x = onFulfilled(this.value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
});
});
this.onRejectedCallbacks.push(() => {
queueMicrotask(() => {
try {
const x = onRejected(this.reason);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
});
});
}
});
return promise2;
};
function resolvePromise(promise, x, resolve, reject) {
if (promise === x) {
return reject(new TypeError('Chaining cycle detected'));
}
let called = false;
if (x != null && (typeof x === 'object' || typeof x === 'function')) {
try {
const then = x.then;
if (typeof then === 'function') {
then.call(x, y => {
if (called) return;
called = true;
resolvePromise(promise, y, resolve, reject);
}, r => {
if (called) return;
called = true;
reject(r);
});
} else {
resolve(x);
}
} catch (e) {
if (called) return;
called = true;
reject(e);
}
} else {
resolve(x);
}
}
这个实现涵盖了 Promise/A+ 规范的核心逻辑，包括：
- 状态管理
- 回调队列存储
- 微任务调度（保证异步执行）
- then 链的返回值处理（尤其是 Promise 穿透）
虽然省略了 finally、catch 等方法，但已足够说明其运行机制。
基本上就这些。理解 Promise 不仅要会用，更要明白它是如何通过状态机和事件循环协作实现异步控制的。掌握源码思路有助于应对复杂异步场景，也为学习 async/await 打下基础。
