19-简单理解JavaScript中的Promise：手写Promise实现

笔记+分享

在现代JavaScript开发中，异步编程是不可避免的一部分。为了更好地处理异步操作，ES6引入了Promise。Promise使得异步代码更具可读性和可维护性。通过手写一个完整的Promise实现，可以帮助你更深入地理解其工作原理。本文将详细介绍Promise的概念、用法及其在实际开发中的应用，并提供一个手写的Promise实现。

什么是Promise？

Promise是JavaScript中的一种对象，用于表示一个异步操作的最终完成（或失败）及其结果值。它有三种状态：

1. Pending（待定）：初始状态，既没有被兑现，也没有被拒绝。
2. Fulfilled（已兑现）：操作成功完成，并返回一个值。
3. Rejected（已拒绝）：操作失败，并返回一个原因。

手写Promise实现

我们将通过构建一个简化版的Promise实现来更好地理解其工作原理。

class MyPromise {constructor(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 (error) {reject(error);}}then(onFulfilled, onRejected) {onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };let promise2 = new MyPromise((resolve, reject) => {if (this.state === 'fulfilled') {setTimeout(() => {try {let x = onFulfilled(this.value);resolvePromise(promise2, x, resolve, reject);} catch (error) {reject(error);}}, 0);}if (this.state === 'rejected') {setTimeout(() => {try {let x = onRejected(this.reason);resolvePromise(promise2, x, resolve, reject);} catch (error) {reject(error);}}, 0);}if (this.state === 'pending') {this.onFulfilledCallbacks.push(() => {setTimeout(() => {try {let x = onFulfilled(this.value);resolvePromise(promise2, x, resolve, reject);} catch (error) {reject(error);}}, 0);});this.onRejectedCallbacks.push(() => {setTimeout(() => {try {let x = onRejected(this.reason);resolvePromise(promise2, x, resolve, reject);} catch (error) {reject(error);}}, 0);});}});return promise2;}catch(onRejected) {return this.then(null, onRejected);}static resolve(value) {return new MyPromise((resolve, reject) => {resolve(value);});}static reject(reason) {return new MyPromise((resolve, reject) => {reject(reason);});}static all(promises) {return new MyPromise((resolve, reject) => {let results = [];let completed = 0;const processResult = (index, value) => {results[index] = value;if (++completed === promises.length) {resolve(results);}};promises.forEach((promise, index) => {MyPromise.resolve(promise).then(value => {processResult(index, value);}, reject);});});}static race(promises) {return new MyPromise((resolve, reject) => {promises.forEach(promise => {MyPromise.resolve(promise).then(resolve, reject);});});}
}function resolvePromise(promise2, x, resolve, reject) {if (promise2 === x) {return reject(new TypeError('Chaining cycle detected for promise'));}let called = false;if (x && (typeof x === 'object' || typeof x === 'function')) {try {let then = x.then;if (typeof then === 'function') {then.call(x, y => {if (called) return;called = true;resolvePromise(promise2, y, resolve, reject);}, reason => {if (called) return;called = true;reject(reason);});} else {resolve(x);}} catch (error) {if (called) return;called = true;reject(error);}} else {resolve(x);}
}

关键点解释

1. 状态管理：Promise有三种状态：pending、fulfilled和rejected。通过state变量来管理当前Promise的状态。
2. 回调队列：使用两个数组onFulfilledCallbacks和onRejectedCallbacks来存储在pending状态时注册的回调函数。
3. resolve和reject：resolve函数将Promise状态从pending变为fulfilled，并执行所有成功回调；reject函数将Promise状态从pending变为rejected，并执行所有失败回调。
4. then方法：then方法返回一个新的Promise，并根据当前Promise的状态决定如何处理回调函数。
5. resolvePromise函数：这个函数用来处理then方法中的链式调用，确保Promise的规范执行，防止循环引用等问题。

用法示例

const p1 = new MyPromise((resolve, reject) => {setTimeout(() => {resolve('成功');}, 1000);
});p1.then(value => {console.log(value); // 输出 "成功"return new MyPromise((resolve, reject) => {setTimeout(() => {resolve('链式调用成功');}, 1000);});
}).then(value => {console.log(value); // 输出 "链式调用成功"
}).catch(error => {console.error(error);
});

通过这个手写的Promise实现，你可以更好地理解Promise的内部工作机制，并在实际开发中灵活运用Promise来处理异步操作。希望这篇博客能帮助你深入理解JavaScript中的Promise。