对手写思路进行说明
constructor(executor)
executor
,该函数接受两个参数:resolve
和 reject
。status
设为 'pending'
,表示 Promise 尚未决议。value
属性用于存储 Promise 解决(fulfilled)或拒绝(rejected)时传递的值。onFulfilledCallbacks
和 onRejectedCallbacks
用于存储 .then
或 .catch
中注册的回调函数,这些回调在 Promise 解决或拒绝时执行。resolve
和 reject
函数resolve(value)
和 reject(reason)
函数改变 Promise 的状态并设置 value
,然后执行对应的回调函数列表。'pending'
,以防止 Promise 状态被多次改变。resolve
被调用时,状态变为 'fulfilled'
,并异步执行所有 onFulfilledCallbacks
中的函数。reject
被调用时,状态变为 'rejected'
,并异步执行所有 onRejectedCallbacks
中的函数。then(onFulfilled, onRejected)
then
方法接收两个参数:onFulfilled
和 onRejected
,它们分别是 Promise 解决或拒绝时的回调函数。then
方法也能正常返回一个新的 Promise。SimplePromise
对象,允许链式调用。then
和 catch
方法通过返回新的 SimplePromise
实例来支持链式调用。setTimeout
中实现的,确保回调总是在函数执行栈清空后异步执行。executor
执行或回调函数执行中捕获异常,并将异常作为拒绝的理由传递给 reject
函数。catch(onRejected)
catch
方法是 then
方法的语法糖,只处理拒绝的情况。这个 SimplePromise
类实现了 then
和 catch
,但没有实现 Promise
的全部功能,例如 Promise.all
, Promise.race
, Promise.resolve
, Promise.reject
等静态方法。此外,这个实现也没有处理一些边缘情况,例如处理链式调用中返回自身的 Promise,或者处理 then
中返回另一个 Promise 的情况。这些都是在完整的、遵循 Promises/A+ 规范的实现中需要考虑的复杂性。
class SimplePromise {
constructor(executor) {
// 初始化状态为 'pending'
this.status = 'pending';
// value 用于保存成功或失败的返回值
this.value = null;
// 保存成功和失败的处理函数
this.onFulfilledCallbacks = [];
this.onRejectedCallbacks = [];
// 成功处理函数
const resolve = (value) => {
if (this.status === 'pending') {
this.status = 'fulfilled';
this.value = value;
this.onFulfilledCallbacks.forEach((callback) => callback(value));
}
};
// 失败处理函数
const reject = (reason) => {
if (this.status === 'pending') {
this.status = 'rejected';
this.value = reason;
this.onRejectedCallbacks.forEach((callback) => callback(reason));
}
};
// 立即执行executor,并传入resolve和reject
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
}
then(onFulfilled, onRejected) {
// 如果onFulfilled不是函数,提供一个默认函数,返回value
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value;
// 如果onRejected不是函数,提供一个默认函数,抛出错误
onRejected = typeof onRejected === 'function' ? onRejected : (reason) => { throw reason; };
// 返回一个新的Promise
return new SimplePromise((resolve, reject) => {
// 如果状态已经确定为fulfilled,立即执行onFulfilled
if (this.status === 'fulfilled') {
setTimeout(() => {
try {
const result = onFulfilled(this.value);
resolve(result);
} catch (error) {
reject(error);
}
});
}
// 如果状态已经确定为rejected,立即执行onRejected
if (this.status === 'rejected') {
setTimeout(() => {
try {
const result = onRejected(this.value);
reject(result);
} catch (error) {
reject(error);
}
});
}
// 如果状态仍然是pending,将onFulfilled和onRejected放入对应的处理数组中
if (this.status === 'pending') {
this.onFulfilledCallbacks.push((value) => {
try {
const result = onFulfilled(value);
resolve(result);
} catch (error) {
reject(error);
}
});
this.onRejectedCallbacks.push((reason) => {
try {
const result = onRejected(reason);
reject(result);
} catch (error) {
reject(error);
}
});
}
});
}
catch(onRejected) {
// catch是then的一个语法糖,只提供onRejected处理函数
return this.then(null, onRejected);
}
}
// 示例1:resolve
const promise1 = new SimplePromise((resolve, reject) => {
resolve('test resolve')
})
promise1.then((res) => {
console.log(res)
}).catch((err) => {
console.log(err)
})
// 示例2:rejected
const promise2 = new SimplePromise((resolve, reject) => {
reject('test reject')
})
promise2.then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
// 示例3 异步操作
const promise3 = new SimplePromise((resolve, reject) => {
setTimeout(() => {
resolve('test after timeout')
}, 1000);
})
promise3.then(res => {
console.log(res)
}).catch(err=>{
console.log(err)
})
// 示例4:异步调用
const promise4 = new SimplePromise((resolve, reject) => {
resolve(1)
})
promise4.then(res => {
console.log(res)
return res + 1
}).then(res => {
console.log(res)
return res + 1
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})