Promise主要是利用的是一种叫做控制反转 IoC的一种设计模式,用这种模式在内部定义一个状态机:pending | fulfilled | rejected ,用传入的executor函数执行异步操作,然后用户手动执行Promise内部通过executor函数传递过来的resolve方法与reject方法对状态机进行修改,之后再根据状态机的状态来执行相应方法:.then() .catch()
type PromiseState = "pending" | "fulfilled" | "rejected";
type Reject = (reason: any) => void;
type Resolve = (value: any) => void;
type Executor = (resolve: Resolve, reject: Reject) => void;
class MyPromise {
private state: PromiseState = "pending";
private value: any;
private reason: any;
constructor(executor: Executor) {
const resolve: Resolve = (value) => {
if (this.state == "pending") {
this.state = "fulfilled";
this.value = value
}
};
const reject:Reject=(reason)=>{
if(this.state == 'pending') {
this.state='rejected'
this.reason = reason
}
}
try{
executor(resolve,reject)
} catch(e){
reject(e)
}
}
}
const promise = new MyPromise((resolve, reject) => {
// 模拟异步操作,比如请求数据
setTimeout(() => {
const success = true;
if (success) { //如果按照预期成功
resolve("成功啦!");
} else { //如果出错
reject("出错了!");
}
}, 1000);
});在使用promise的时候,我之前很纳闷,为何参数里面凭空多出来两个方法供我调用,我自己的概念中,函数参数是被传递的,而不是凭空多出来的,知道手写Promise,了解控制反转 IoC这个模式后才知道
then = (onFulfilled: Resolve, onRejected: Reject) => {
return new MyPromise((resolve, reject) => {
// 包装一下回调函数,加入错误处理
const fulfilledWrapper = (value:any) => {
try {
const result = onFulfilled ? onFulfilled(value) : value;
resolve(result); // 让返回的 Promise resolve
} catch (e) {
reject(e); // 出错就 reject
}
};
const rejectedWrapper = (reason:any) => {
try {
const result = onRejected ? onRejected(reason) : reason;
reject(result);
} catch (e) {
reject(e);
}
};
if (this.state === "fulfilled") {
fulfilledWrapper(this.value);
} else if (this.state === "rejected") {
rejectedWrapper(this.value);
} else {
this.onFulfilledCallbacks.push(fulfilledWrapper);
this.onRejectedCallbacks.push(rejectedWrapper);
}
});
};这里的.then方法等水平上来了再理解吧,我现在有些蠢,在AI的帮助下也理解不了里面的逻辑