测试驱动来学习 Promise

基础功能

• 测试案例：以同步的方式调用。

/**
 * v1: 基础功能
 */
const p1 = new MyPromise((resolve, reject) => {
    resolve('success')
    reject('error')
})

p1.then((value) => {
    console.log('v1: ', value)
}) 

• 实现功能：在 status 和 value 的位置暂存值，在 then 函数中取出。

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
    status = PENDING;
    value = null;

    constructor(executor) {
        executor(this.resolve, this.reject);
    }

    resolve = (value) => {
        if (this.status === PENDING) {
            this.status = FULFILLED;
            this.value = value;
        }
    }

    reject = (value) => {
        if (this.status === PENDING) {
            this.status = REJECTED;
            this.value = value;
        }
    }

    then = (onFulfilled, onRejected) => {
        const callbackMap = {
            [FULFILLED]: onFulfilled,
            [REJECTED]: onRejected
        }
        callbackMap[this.status]?.(this.value)
    }
}

异步执行

• 测试案例

/**
 * v2: 异步执行
 */
const p2 = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('success') // 异步结束后调用
    }, 1000)
})

p2.then((value) => {
    console.log('v2: ', value)
})

• 实现功能

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
    status = PENDING;
    value = null;
    fulfilledCallback = null; // 暂存 reject
    rejectedCallback = null; // 暂存 reject

    constructor(executor) {
        executor(this.resolve, this.reject);
    }

    resolve = (value) => {
        if (this.status === PENDING) {
            this.status = FULFILLED;
            this.value = value;
            this.fulfilledCallback?.(value); // 异步结束后调用 resolve
        }
    }

    reject = (value) => {
        if (this.status === PENDING) {
            this.status = REJECTED;
            this.value = value;
            this.rejectedCallback?.(value); // 异步结束后调用 reject
        }
    }

    then = (onFulfilled, onRejected) => {
        const callbackMap = {
            [FULFILLED]: onFulfilled,
            [REJECTED]: onRejected,
            [PENDING]: () => {
                this.fulfilledCallback = onFulfilled;
                this.rejectedCallback = onRejected;
            }
        }
        callbackMap[this.status]?.(this.value)
    }
}

异步时多个then

• 测试案例

/**
 * v3: 异步时多个then
 */
const p3 = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('success')
    }, 1000)
})

p3.then((value) => {
    console.log('v3 - 1: ', value)
})
p3.then((value) => {
    console.log('v3 - 2: ', value)
})
// v3 - 1:  success
// v3 - 2:  success

• 实现功能

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
    status = PENDING;
    value = null;
    fulfilledCallbacks = []; // 暂存 resolve
    rejectedCallbacks = []; //  暂存 reject

    constructor(executor) {
        executor(this.resolve, this.reject);
    }

    resolve = (value) => {
        if (this.status === PENDING) {
            this.status = FULFILLED;
            this.value = value;
            while (this.fulfilledCallbacks.length) { // 遍历执行所有的 resolve
                this.fulfilledCallbacks.shift()?.(value);
            }
        }
    }

    reject = (value) => {
        if (this.status === PENDING) {
            this.status = REJECTED;
            this.value = value;
            while (this.rejectedCallbacks.length) { // 遍历执行所有的 reject
                this.rejectedCallbacks.shift()?.(value);
            }
        }
    }

    then = (onFulfilled, onRejected) => {
        const callbackMap = {
            [FULFILLED]: onFulfilled,
            [REJECTED]: onRejected,
            [PENDING]: () => {
                this.fulfilledCallbacks.push(onFulfilled);  // 异步时多个then
                this.rejectedCallbacks.push(onRejected);
            }
        }
        callbackMap[this.status]?.(this.value)
    }
}

链式调用

• 测试案例

const p4 = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('success')
    }, 1000)
})

p4.then((value) => {
    console.log('v4 - 1: ', value)
    return 1;
}).then((value) => {
    console.log('v4 - 2: ', value)
    return 2;
})
// v4 - 1:  success
// v4 - 2:  1

• 实现功能

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
    status = PENDING;
    value = null;
    fulfilledCallbacks = [];
    rejectedCallbacks = [];

    constructor(executor) {
        executor(this.resolve, this.reject);
    }

    resolve = (value) => {
        if (this.status === PENDING) {
            this.status = FULFILLED;
            this.value = value;
            while (this.fulfilledCallbacks.length) {
                this.fulfilledCallbacks.shift()?.(value);
            }
        }
    }

    reject = (value) => {
        if (this.status === PENDING) {
            this.status = REJECTED;
            this.value = value;
            while (this.rejectedCallbacks.length) {
                this.rejectedCallbacks.shift()?.(value);
            }
        }
    }

    then = (onFulfilled, onRejected) => {
        return new MyPromise((resolve, reject) => {
            const fulfilledTask = (value) => {
                const res = onFulfilled(value); // 将上一个 Promise 的 resolve 结果传入当前 Promise
                resolve(res);   // 确保返回的 Promise 被执行
            }
            const rejectedTask = (value) => {
                const res = onRejected(value);
                reject(res);    // 确保返回的 Promise 被执行
            }
            const callbackMap = {
                [FULFILLED]: fulfilledTask,
                [REJECTED]: rejectedTask,
                [PENDING]: () => {
                    this.fulfilledCallbacks.push(fulfilledTask);  // 异步时多个then
                    this.rejectedCallbacks.push(rejectedTask);    // 异步时多个then
                }
            }
            callbackMap[this.status]?.(this.value)
        })
    }
}

返回自身

• 测试案例

/*
* v6: 返回自身
*/
const p6 = new MyPromise((resolve, reject) => {
    resolve(1);
});

const p62 = p6.then((res) => {
    console.log(res);
    return p62;
});
p62.then(
    () => { },
    (err) => console.log(err)
);