深入理解JavaScript中的Promise实现原理

pending

executor

executor

resolve

reject

resolve

pending

fulfilled

reject

rejected

then

then

onFulfilled

onRejected

then

pending

resolve

reject

then

onFulfilled

onRejected

resolve

reject

fulfilled

then

then

then

MyPromise

then

setTimeout

queueMicrotask

class MyPromise {
    constructor(executor) {
        this.state = 'pending'; // 初始状态
        this.value = undefined; // 成功时保存的值
        this.reason = undefined; // 失败时保存的原因
        this.onFulfilledCallbacks = []; // 成功回调队列
        this.onRejectedCallbacks = []; // 失败回调队列

        const resolve = (value) => {
            // 规范要求：如果value是MyPromise，则需要“采纳”其状态
            if (value instanceof MyPromise) {
                return value.then(resolve, reject);
            }
            // 只有pending状态才能改变
            if (this.state === 'pending') {
                this.state = 'fulfilled';
                this.value = value;
                // 异步执行所有成功回调
                this.onFulfilledCallbacks.forEach(callback => {
                    setTimeout(() => callback(this.value), 0);
                });
            }
        };

        const reject = (reason) => {
            if (this.state === 'pending') {
                this.state = 'rejected';
                this.reason = reason;
                // 异步执行所有失败回调
                this.onRejectedCallbacks.forEach(callback => {
                    setTimeout(() => callback(this.reason), 0);
                });
            }
        };

        try {
            executor(resolve, reject);
        } catch (error) {
            reject(error); // 捕获executor中可能抛出的同步错误
        }
    }

    then(onFulfilled, onRejected) {
        // 确保onFulfilled和onRejected是函数，否则提供默认透传函数
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
        onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason; };

        // then方法必须返回一个新的Promise
        const newPromise = new MyPromise((resolve, reject) => {
            const handleCallback = (callback, data) => {
                setTimeout(() => { // 异步执行回调
                    try {
                        const x = callback(data);
                        // 处理返回结果x，这是Promise/A+规范的核心
                        // 如果x是Promise，则等待其状态
                        if (x instanceof MyPromise) {
                            x.then(resolve, reject);
                        } else {
                            // 否则，直接用x解决newPromise
                            resolve(x);
                        }
                    } catch (error) {
                        reject(error); // 捕获回调中可能抛出的错误
                    }
                }, 0);
            };

            if (this.state === 'fulfilled') {
                handleCallback(onFulfilled, this.value);
            } else if (this.state === 'rejected') {
                handleCallback(onRejected, this.reason);
            } else { // pending状态，将回调存入队列
                this.onFulfilledCallbacks.push((value) => handleCallback(onFulfilled, value));
                this.onRejectedCallbacks.push((reason) => handleCallback(onRejected, reason));
            }
        });

        return newPromise;
    }

    // 实现一个简单的catch方法
    catch(onRejected) {
        return this.then(null, onRejected);
    }
}

// 示例用法：
console.log('--- Start ---');

new MyPromise((resolve, reject) => {
    console.log('Executor started');
    // 模拟异步操作
    setTimeout(() => {
        const success = Math.random() > 0.5;
        if (success) {
            console.log('Resolving with "Hello Promise!"');
            resolve('Hello Promise!');
        } else {
            console.log('Rejecting with "Something went wrong!"');
            reject('Something went wrong!');
        }
    }, 100);
})
.then(data => {
    console.log('First then - success:', data);
    return data + ' Chain!'; // 返回一个普通值
})
.then(newData => {
    console.log('Second then - success:', newData);
    return new MyPromise(resolve => { // 返回一个新的Promise
        setTimeout(() => {
            console.log('Inner Promise resolved');
            resolve(newData + ' Inner!');
        }, 50);
    });
})
.then(finalData => {
    console.log('Third then - final success:', finalData);
    // throw new Error('Oops, another error!'); // 模拟同步错误
    return finalData;
})
.catch(error => {
    console.error('Caught error:', error); // 捕获链中的任何错误
})
.finally(() => { // 模拟finally
    console.log('Finally block executed.');
});

console.log('--- End ---');

resolve

reject

then

handleCallback

x