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。