测试驱动来学习 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; // 暂存 rejectrejectedCallback = null; // 暂存 rejectconstructor(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 = []; // 暂存 resolverejectedCallbacks = []; //  暂存 rejectconstructor(executor) {executor(this.resolve, this.reject);}resolve = (value) => {if (this.status === PENDING) {this.status = FULFILLED;this.value = value;while (this.fulfilledCallbacks.length) { // 遍历执行所有的 resolvethis.fulfilledCallbacks.shift()?.(value);}}}reject = (value) => {if (this.status === PENDING) {this.status = REJECTED;this.value = value;while (this.rejectedCallbacks.length) { // 遍历执行所有的 rejectthis.rejectedCallbacks.shift()?.(value);}}}then = (onFulfilled, onRejected) => {const callbackMap = {[FULFILLED]: onFulfilled,[REJECTED]: onRejected,[PENDING]: () => {this.fulfilledCallbacks.push(onFulfilled);  // 异步时多个thenthis.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 结果传入当前 Promiseresolve(res);   // 确保返回的 Promise 被执行}const rejectedTask = (value) => {const res = onRejected(value);reject(res);    // 确保返回的 Promise 被执行}const callbackMap = {[FULFILLED]: fulfilledTask,[REJECTED]: rejectedTask,[PENDING]: () => {this.fulfilledCallbacks.push(fulfilledTask);  // 异步时多个thenthis.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)
);