各位观众老爷，晚上好！欢迎来到今天的“JavaScript Promise A+ 规范深度游”讲座。我是今晚的导游，咱们一起扒一扒 Promise 的底裤，看看它到底是怎么运作的。
准备好了吗？发车！
一、Promise 的前世今生：状态机的故事
Promise 这玩意儿，说白了，就是一个状态机。它有三种状态，就像人生一样，充满了可能性（和不确定性）：
- Pending (等待中)： 这是初始状态，表示 Promise 还没完成，可能还在等服务器响应，或者在进行一些耗时操作。就像你刚投简历，等 HR 通知面试一样。
- Fulfilled (已成功)： 表示 Promise 已经成功完成，并且有一个值（value）作为结果。就像你面试通过，拿到了 Offer。
- Rejected (已失败)： 表示 Promise 因为某些原因失败了，并且有一个原因（reason）作为结果。就像你面试挂了，收到了“感谢信”。
这三种状态只能按照特定的顺序进行转换，而且一旦转换就不可逆，就像时光一样，一去不复返。
| 状态 | 描述 |
|---|---|
| Pending | 初始状态，等待 resolve 或 reject。 |
| Fulfilled | 成功状态，Promise 已经 resolve，并且有一个 value。 |
| Rejected | 失败状态，Promise 已经 reject，并且有一个 reason。 |
状态转换图：
Pending --> Fulfilled
Pending --> Rejected敲黑板！重点来了！
- Promise 只能从 Pending 状态转换到 Fulfilled 或 Rejected 状态。
- Promise 的状态一旦改变，就永远不会再变。这叫做状态不可变性。
二、Promise 的构造函数：创造的艺术
要创建一个 Promise 对象，我们需要使用 new Promise() 构造函数。这个构造函数接收一个 executor 函数作为参数。executor 函数又接收两个参数：resolve 和 reject。
const myPromise = new Promise((resolve, reject) => {
// 模拟异步操作
setTimeout(() => {
const success = Math.random() > 0.5; // 模拟成功或失败
if (success) {
resolve("Promise 成功了！"); // 调用 resolve，Promise 变成 Fulfilled 状态
} else {
reject("Promise 失败了！"); // 调用 reject，Promise 变成 Rejected 状态
}
}, 1000);
});在这个例子中：
new Promise()创建了一个 Promise 对象，并且状态为 Pending。- executor 函数在 Promise 创建后立即执行。
setTimeout模拟了一个异步操作。- 如果异步操作成功，调用
resolve函数，并将结果传递给它。resolve函数会将 Promise 的状态变为 Fulfilled，并将结果作为 Promise 的 value。 - 如果异步操作失败，调用
reject函数，并将原因传递给它。reject函数会将 Promise 的状态变为 Rejected，并将原因作为 Promise 的 reason。
三、then 方法：链式调用的秘密武器
then 方法是 Promise 最重要的组成部分之一。它允许我们注册回调函数，在 Promise 的状态变为 Fulfilled 或 Rejected 时执行。
myPromise.then(
(value) => {
console.log("成功的回调：", value); // Promise 成功时执行
},
(reason) => {
console.error("失败的回调：", reason); // Promise 失败时执行
}
);then 方法接收两个可选参数：
onFulfilled：当 Promise 状态变为 Fulfilled 时执行的回调函数。它接收 Promise 的 value 作为参数。onRejected：当 Promise 状态变为 Rejected 时执行的回调函数。它接收 Promise 的 reason 作为参数。
链式调用：
then 方法最强大的特性之一是它支持链式调用。这意味着我们可以在一个 Promise 对象上多次调用 then 方法，形成一个链条。
myPromise
.then((value) => {
console.log("第一个 then：", value);
return value + " 额外信息"; // 返回一个新的值
})
.then((value) => {
console.log("第二个 then：", value); // 接收上一个 then 返回的值
})
.catch((reason) => {
console.error("捕获错误：", reason);
});敲黑板！重点来了！
then方法总是返回一个新的 Promise 对象。- 如果
onFulfilled或onRejected回调函数返回一个值，那么then方法返回的 Promise 对象会立即变为 Fulfilled 状态，并且 value 为回调函数返回的值。 - 如果
onFulfilled或onRejected回调函数抛出一个错误，那么then方法返回的 Promise 对象会立即变为 Rejected 状态，并且 reason 为抛出的错误。 - 如果
onFulfilled或onRejected回调函数返回一个 Promise 对象，那么then方法返回的 Promise 对象的状态会与回调函数返回的 Promise 对象的状态保持一致。这叫做 Promise 状态传递。
Promise 状态传递的例子：
const anotherPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("另一个 Promise 成功了！");
}, 500);
});
myPromise
.then((value) => {
console.log("第一个 then：", value);
return anotherPromise; // 返回另一个 Promise 对象
})
.then((value) => {
console.log("第二个 then：", value); // 接收 anotherPromise 的 value
})
.catch((reason) => {
console.error("捕获错误：", reason);
});在这个例子中，第二个 then 方法会等待 anotherPromise 状态变为 Fulfilled 之后才会执行。
四、catch 方法：错误处理的救星
catch 方法是用来捕获 Promise 链中任何地方发生的错误的。它实际上是 then(null, onRejected) 的语法糖。
myPromise
.then((value) => {
console.log("成功的回调：", value);
throw new Error("故意抛出一个错误！"); // 抛出一个错误
})
.catch((reason) => {
console.error("捕获错误：", reason); // 捕获到上面的错误
});在这个例子中，catch 方法会捕获到 then 方法中抛出的错误。
五、finally 方法：善始善终的保证
finally 方法是在 Promise 无论成功或失败都会执行的回调函数。它不接收任何参数，并且不会影响 Promise 的状态。
myPromise
.then((value) => {
console.log("成功的回调：", value);
})
.catch((reason) => {
console.error("失败的回调：", reason);
})
.finally(() => {
console.log("无论成功或失败都会执行！");
});finally 方法通常用于执行一些清理操作，例如关闭数据库连接，或者隐藏加载动画。
敲黑板！重点来了！
finally方法返回一个新的 Promise 对象。- 如果
finally回调函数抛出一个错误，那么finally方法返回的 Promise 对象会立即变为 Rejected 状态，并且 reason 为抛出的错误。 finally回调函数不会接收任何参数，也无法改变 Promise 的状态。
六、Promise.resolve 和 Promise.reject：快速创建 Promise
Promise.resolve 和 Promise.reject 是两个静态方法，用于快速创建 Fulfilled 或 Rejected 状态的 Promise 对象。
const resolvedPromise = Promise.resolve("快速创建的成功 Promise！");
const rejectedPromise = Promise.reject("快速创建的失败 Promise！");
resolvedPromise.then((value) => {
console.log("resolvedPromise 的 value：", value); // 输出 "快速创建的成功 Promise！"
});
rejectedPromise.catch((reason) => {
console.error("rejectedPromise 的 reason：", reason); // 输出 "快速创建的失败 Promise！"
});七、Promise.all 和 Promise.race：并发控制的利器
Promise.all 和 Promise.race 是两个静态方法，用于处理多个 Promise 对象。
-
Promise.all(promises)： 接收一个 Promise 对象数组作为参数。只有当数组中所有的 Promise 对象都变为 Fulfilled 状态时，Promise.all返回的 Promise 对象才会变为 Fulfilled 状态，并且 value 为一个包含所有 Promise 对象 value 的数组。如果数组中任何一个 Promise 对象变为 Rejected 状态，Promise.all返回的 Promise 对象会立即变为 Rejected 状态，并且 reason 为第一个变为 Rejected 状态的 Promise 对象的 reason。 -
Promise.race(promises)： 接收一个 Promise 对象数组作为参数。只要数组中任何一个 Promise 对象变为 Fulfilled 或 Rejected 状态，Promise.race返回的 Promise 对象就会立即变为与该 Promise 对象相同的状态，并且 value 或 reason 也与该 Promise 对象相同。
Promise.all 的例子：
const promise1 = Promise.resolve("Promise 1 成功！");
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Promise 2 成功！");
}, 500);
});
const promise3 = Promise.resolve("Promise 3 成功！");
Promise.all([promise1, promise2, promise3])
.then((values) => {
console.log("所有 Promise 都成功了！", values); // 输出 ["Promise 1 成功！", "Promise 2 成功！", "Promise 3 成功！"]
})
.catch((reason) => {
console.error("至少一个 Promise 失败了！", reason);
});Promise.race 的例子：
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Promise 1 成功！");
}, 1000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject("Promise 2 失败！");
}, 500);
});
Promise.race([promise1, promise2])
.then((value) => {
console.log("最先完成的 Promise 成功了！", value);
})
.catch((reason) => {
console.error("最先完成的 Promise 失败了！", reason); // 输出 "最先完成的 Promise 失败！", "Promise 2 失败！"
});八、Promise A+ 规范的精髓：
Promise A+ 规范定义了 Promise 对象应该如何运作，以确保不同 JavaScript 环境下的 Promise 实现能够互相兼容。 规范的核心要点可以总结如下：
- 状态 (State):
- Promise 必须处于以下三种状态之一：
pending、fulfilled或rejected。 pending状态可以转换成fulfilled或rejected状态。fulfilled或rejected状态是不可逆的。
- Promise 必须处于以下三种状态之一：
- Thenable 接口:
- Promise 必须提供一个
then方法，用于注册成功和失败的回调函数。 then方法必须返回一个新的 Promise 对象。then方法可以被多次调用，而且回调函数必须按照注册的顺序执行。
- Promise 必须提供一个
- Resolution Procedure (解析过程):
- 当 Promise 被
resolve或reject时，必须执行相应的回调函数。 - 如果
resolve的参数是一个 Promise 对象，那么新的 Promise 对象必须采用该 Promise 对象的状态。 - 如果
resolve的参数是一个 thenable 对象（即具有then方法的对象），那么新的 Promise 对象必须尝试采用该 thenable 对象的状态。 - 如果
resolve的参数既不是 Promise 对象也不是 thenable 对象，那么新的 Promise 对象必须立即变为fulfilled状态，并且 value 为该参数。
- 当 Promise 被
- 错误处理:
- 如果在 Promise 链中的任何地方发生错误，错误必须沿着 Promise 链传播，直到被
catch方法捕获。
- 如果在 Promise 链中的任何地方发生错误，错误必须沿着 Promise 链传播，直到被
- 异步性:
onFulfilled和onRejected回调函数必须异步执行，即不能在调用then方法的同一线程中执行。 通常通过setTimeout或者setImmediate来实现。
九、手写一个简单的符合 A+ 规范的 Promise (简化版):
为了更好地理解 Promise 的实现细节，我们来手写一个简单的符合 A+ 规范的 Promise (简化版)。 这个版本只实现了核心功能，例如状态管理、then 方法和异步执行。
function MyPromise(executor) {
let state = 'pending';
let value = undefined;
let reason = undefined;
let onFulfilledCallbacks = [];
let onRejectedCallbacks = [];
const resolve = (val) => {
if (state === 'pending') {
state = 'fulfilled';
value = val;
onFulfilledCallbacks.forEach(fn => fn());
}
};
const reject = (rea) => {
if (state === 'pending') {
state = 'rejected';
reason = rea;
onRejectedCallbacks.forEach(fn => fn());
}
};
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
this.then = (onFulfilled, onRejected) => {
const promise2 = new MyPromise((resolve, reject) => {
const handleFulfilled = () => {
setTimeout(() => {
try {
if (typeof onFulfilled === 'function') {
const x = onFulfilled(value);
resolvePromise(promise2, x, resolve, reject);
} else {
resolve(value);
}
} catch (e) {
reject(e);
}
}, 0);
}
const handleRejected = () => {
setTimeout(() => {
try {
if (typeof onRejected === 'function') {
const x = onRejected(reason);
resolvePromise(promise2, x, resolve, reject);
} else {
reject(reason);
}
} catch (e) {
reject(e);
}
}, 0);
}
if (state === 'fulfilled') {
handleFulfilled();
} else if (state === 'rejected') {
handleRejected();
} else {
onFulfilledCallbacks.push(handleFulfilled);
onRejectedCallbacks.push(handleRejected);
}
});
return promise2;
};
function resolvePromise(promise2, x, resolve, reject) {
if (promise2 === x) {
return reject(new TypeError('Chaining cycle detected for promise #<MyPromise>'));
}
let called; // 为了防止多次调用 resolve 或 reject
if ((typeof x === 'object' && x !== null) || typeof x === 'function') {
try {
const then = x.then;
if (typeof then === 'function') {
then.call(x,
y => {
if (called) return;
called = true;
resolvePromise(promise2, y, resolve, reject);
},
r => {
if (called) return;
called = true;
reject(r);
}
);
} else {
if (called) return;
called = true;
resolve(x);
}
} catch (e) {
if (called) return;
called = true;
reject(e);
}
} else {
if (called) return;
called = true;
resolve(x);
}
}
}
// 测试用例
const promise = new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve('成功啦！');
//reject('失败啦！');
}, 1000);
});
promise.then((value) => {
console.log('成功回调:', value);
}, (reason) => {
console.log('失败回调:', reason);
});
代码解释:
MyPromise(executor): Promise 的构造函数.state,value,reason: 分别用于存储 Promise 的状态, 成功的值和失败的原因.onFulfilledCallbacks,onRejectedCallbacks: 分别用于存储成功和失败的回调函数, 当 Promise 状态改变时, 依次执行这些回调函数.resolve(val): 将 Promise 的状态改为fulfilled, 并存储成功的值.reject(rea): 将 Promise 的状态改为rejected, 并存储失败的原因.this.then(onFulfilled, onRejected): 注册成功和失败的回调函数. 返回一个新的 Promise 对象.resolvePromise(promise2, x, resolve, reject): 处理resolve的参数是一个 Promise 对象或者 thenable 对象的情况. 这个函数确保promise2采用x的状态.
这个简化版的 Promise 只是为了演示 Promise 的核心概念，并没有实现所有 A+ 规范的要求。 例如，它没有实现 catch 和 finally 方法，也没有对 onFulfilled 和 onRejected 函数进行更严格的类型检查。
十、总结：Promise 的价值
Promise 解决了什么问题？
- 回调地狱 (Callback Hell): Promise 通过链式调用，避免了嵌套过深的回调函数，使代码更加易读和易维护。
- 异步操作的流程控制: Promise 提供了一种清晰的方式来处理异步操作的成功和失败，并且可以方便地进行并发控制。
- 错误处理: Promise 的错误冒泡机制使得错误处理更加集中和方便。
总而言之，Promise 是 JavaScript 中处理异步操作的强大工具，它提高了代码的可读性、可维护性和可测试性。 掌握 Promise 的原理和使用方法，对于编写高质量的 JavaScript 代码至关重要。
好了，今天的讲座就到这里。 感谢大家的观看！ 如果大家有什么问题，欢迎提问。 我们下次再见！