基础功能
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)
}
}
异步执行
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;
rejectedCallback = null;
constructor(executor) {
executor(this.resolve, this.reject);
}
resolve = (value) => {
if (this.status === PENDING) {
this.status = FULFILLED;
this.value = value;
this.fulfilledCallback?.(value);
}
}
reject = (value) => {
if (this.status === PENDING) {
this.status = REJECTED;
this.value = value;
this.rejectedCallback?.(value);
}
}
then = (onFulfilled, onRejected) => {
const callbackMap = {
[FULFILLED]: onFulfilled,
[REJECTED]: onRejected,
[PENDING]: () => {
this.fulfilledCallback = onFulfilled;
this.rejectedCallback = onRejected;
}
}
callbackMap[this.status]?.(this.value)
}
}
异步时多个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)
})
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) => {
const callbackMap = {
[FULFILLED]: onFulfilled,
[REJECTED]: onRejected,
[PENDING]: () => {
this.fulfilledCallbacks.push(onFulfilled);
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;
})
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);
resolve(res);
}
const rejectedTask = (value) => {
const res = onRejected(value);
reject(res);
}
const callbackMap = {
[FULFILLED]: fulfilledTask,
[REJECTED]: rejectedTask,
[PENDING]: () => {
this.fulfilledCallbacks.push(fulfilledTask);
this.rejectedCallbacks.push(rejectedTask);
}
}
callbackMap[this.status]?.(this.value)
})
}
}
返回自身
const p6 = new MyPromise((resolve, reject) => {
resolve(1);
});
const p62 = p6.then((res) => {
console.log(res);
return p62;
});
p62.then(
() => { },
(err) => console.log(err)
);