手写 Promise
ts
type Resolve<T> = (value?: T | MyPromise<T>) => void;
type Reject = (reason?: any) => void;
type Executor<T> = (resolve: Resolve<T>, reject: Reject) => void;
// Promise 的三种状态
enum PromiseState {
PENDING = "pending",
FULFILLED = "fulfilled",
REJECTED = "rejected",
}
export class MyPromise<T> {
private state: PromiseState = PromiseState.PENDING; // Promise 的当前状态
private value?: T; // 存储Promise成功时的值
private reason?: any; // 存储Promise失败时的原因
private onFulfilledCallbacks: ((value: T) => void)[] = []; // 存储成功的回调
private onRejectedCallbacks: ((reason: any) => void)[] = []; // 存储失败的回调
constructor(executor: Executor<T>) {
const resolve: Resolve<T> = (value) => {
// 使用setTimeout确保回调的异步性
setTimeout(() => {
if (this.state === PromiseState.PENDING) {
this.state = PromiseState.FULFILLED;
this.value = value as T;
this.onFulfilledCallbacks.forEach((callback) =>
callback(this.value!)
);
}
});
};
const reject: Reject = (reason) => {
setTimeout(() => {
if (this.state === PromiseState.PENDING) {
this.state = PromiseState.REJECTED;
this.reason = reason;
this.onRejectedCallbacks.forEach((callback) => callback(this.reason));
}
});
};
try {
executor(resolve, reject); // 执行executor
} catch (error) {
reject(error); // 如果executor执行出错,将错误原因reject
}
}
then<TResult1 = T, TResult2 = never>(
onFulfilled?: (value: T) => TResult1 | MyPromise<TResult1>,
onRejected?: (reason: any) => TResult2 | MyPromise<TResult2>
): MyPromise<TResult1 | TResult2> {
return new MyPromise<TResult1 | TResult2>((resolve, reject) => {
// 成功态的回调
const handleFulfilled = (value: T) => {
try {
// 执行成功回调,或者直接返回value
const result = onFulfilled ? onFulfilled(value) : value;
if (result instanceof MyPromise) {
result.then(resolve, reject);
} else {
resolve(result as unknown as TResult1);
}
} catch (error) {
reject(error);
}
};
// 失败态的回调
const handleRejected = (error: any) => {
try {
if (onRejected) {
const result = onRejected(error);
if (result instanceof MyPromise) {
result.then(resolve, reject);
} else {
resolve(result as unknown as TResult1);
}
} else {
reject(error);
}
} catch (catchError) {
reject(catchError);
}
};
if (this.state === PromiseState.FULFILLED) {
// 异步执行成功回调
setTimeout(() => handleFulfilled(this.value!), 0);
} else if (this.state === PromiseState.REJECTED) {
// 异步执行失败回调
setTimeout(() => handleRejected(this.reason), 0);
} else {
// 将成功和失败的回调存储起来
this.onFulfilledCallbacks.push(handleFulfilled);
this.onRejectedCallbacks.push(handleRejected);
}
});
}
// MyPromise.all静态方法,用于处理多个Promise并发
static all<T>(promises: MyPromise<T>[]): MyPromise<T[]> {
return new MyPromise<T[]>((resolve, reject) => {
const result: T[] = []; // 存储每个Promise的结果
let count = 0; // 计数器,用于判断所有Promise是否都已经完成
promises.forEach((promise, index) => {
promise.then(
(value) => {
result[index] = value; // 将每个Promise的结果存储到result中
count++;
// 如果所有Promise都已经完成,则resolve
if (count === promises.length) {
resolve(result);
}
},
(reason) => {
reject(reason); // 如果有一个Promise失败,则reject
}
);
});
});
}
}