文章目录
- 手写 promise
- resolve、reject
- all、allSettled
- race、any
- 完整的 promise
手写 promise
前置背景：大白话手写 promise
resolve、reject
作为类直接调用的方法，自然是静态方法。
**resolve 与 reject 的原理都是内部自己实例化了一个 promise，然后去调用 resolve 或 reject。**本质和自己实例化 promise 调用没啥区别。
class LcPromise {constructor(executed) {}then(onFulfilled, onRejected) {}catch(onRejected) {}finally(fn) {}static resolve(value) {return new LcPromise((resolve, reject) => resolve(value))}static reject(reason) {return new LcPromise((resolve, reject) => reject(reason))}
}
all、allSettled
all 方法的用法：接收一个 promise 实例数组，等待数组中所有的 promise fulfilled 后将调用 then 的 onFulfilled，只要其中有一个promise rejected，就立即调用 then 的 onRejected。
Promise.all([]).then(onFulfilled).catch(onRejected)
由此可知 all 肯定返回一个 promise 实例，要不然咋调用 then。我们可以一个一个等待数组中 promise 实例的结果，当 promise 实例全部执行的是 onFulfilled，那就说明整个 all 已经是 fulfilled 状态，resolve all 返回的 promise 实例。如果其中一个执行 onRejected，则说明 all 中出现错误，整个 all 的 promise 实例就可以 reject 了。
整个问题的关键就在于 all 返回的 promise 什么时候执行 resolve，什么时候执行 reject。
static all(promiseArr) {const allResult = [];return new LcPromise((resolve, reject) => {promiseArr.forEach((promise) => {// 执行每个 promise 实例promise.then((res) => {// 收集每个 promise 的成功结果allResult.push(res);// 当收集完所有的 promise，说明整体的 promise 应该为 fulfilled 状态了，执行 resolveif (allResult.length === promiseArr.length) resolve(allResult);},(err) => {// 只要有一个 promise rejected 了，就执行整个 promise 的 reject 函数reject(err);});});});
}
allSettled 与 all 差不多，区别就是当 allSettled 接收的 promise 数组中存在 reject 的 promise 时，它不会中断整个 allSettled 函数的执行，allSettled 返回的 promise 不会变成 rejected，依然为 pending，继续执行数组中后续的 promise。说明 allSettled 返回的 promise 不会执行 reject 函数，它最后一定是 fulfilled 状态。对于数组中 rejected 状态的 promise，allSettled 的返回值是一个数组对象。对象中包含了每个 promise 的状态和结果或错误信息。
static allSettled(promiseArr) {const allResult = [];return new LcPromise((resolve, reject) => {promiseArr.forEach((promise) => {promise.then((res) => {allResult.push({ status: "fulfilled", res: res });if (allResult.length === promiseArr.length) resolve(allResult);},(err) => {allResult.push({ status: "rejected", err: err });if (allResult.length === promiseArr.length) resolve(allResult);});});});
}
测试：
const p1 = new LcPromise((resolve, reject) => {resolve(1111);
});
const p2 = new LcPromise((resolve, reject) => {// resolve(2222);reject("hhh");
});
const p3 = new LcPromise((resolve, reject) => {resolve(3333);
});LcPromise.all([p1, p2, p3]).then((res) => console.log(res)).catch((err) => console.log(err));// hhhLcPromise.allSettled([p1, p2, p3]).then((res) => console.log(res)).catch((err) => console.log(err));// [
// { status: 'fulfilled', res: 1111 },
// { status: 'rejected', err: 'hhh' },
// { status: 'fulfilled', res: 3333 }
// ]
race、any
race 方法的用法：基本也和 all 差不多，区别就是只要数组中有一个 promise 确定了状态就立即确定了整个 race 返回的 promise 的状态。
所以有一个 promise 执行了 then 方法，就可以立即执行整体 promise 的 resolve 方法或 reject 方法。
static race(promiseArr) {return new LcPromise((resolve, reject) => {promiseArr.forEach((promise) => {// 有一个 promise 确定了状态，就立即确定了整体 promise 的状态promise.then(res => {resolve(res)}, err => {reject(err)})})})
}
any 的用法是，只要数组中有一个 promise 为 fulfilled 就执行 resolve，整体 promise 为 fulfilled。当数组中所有 promise 为 rejected 才执行 reject 函数，整体为 rejected，并且返回一个包含所有错误信息的合并错误数组new AggregateError(arr)。
注意这个构造函数 nodejs 没有实现，只能在浏览器中测试。它有一个 errors 属性，可以查看错误信息。
static any(promiseArr) {return new LcPromise((resolve, reject) => {const reasonArr = []promiseArr.forEach((promise) => {promise.then(res => {resolve(res)}, err => {reasonArr.push(err)if (promiseArr.length === reasonArr.length) reject(new AggregateError(reasonArr))})})})
}
测试：
const p1 = new LcPromise((resolve, reject) => {setTimeout(() => {resolve(1111);}, 3000);
});
const p2 = new LcPromise((resolve, reject) => {// resolve(2222);setTimeout(() => {reject("hhh");}, 1000);
});
const p3 = new LcPromise((resolve, reject) => {setTimeout(() => {resolve(3333);}, 2000);
});LcPromise.race([p1, p2, p3]).then((res) => console.log(res)).catch((err) => console.log(err));// hhh 打印最快确定状态的信息
// 所有 promise rejected 的情况
const p1 = new LcPromise((resolve, reject) => {setTimeout(() => {// resolve(1111);reject("h1");}, 3000);
});
const p2 = new LcPromise((resolve, reject) => {// resolve(2222);setTimeout(() => {reject("h2");}, 1000);
});
const p3 = new LcPromise((resolve, reject) => {setTimeout(() => {// resolve(3333);reject("h3");}, 2000);
});LcPromise.any([p1, p2, p3]).then((res) => console.log(res)).catch((err) => console.log(err.errors));// (3) ['h2', 'h3', 'h1']完整的 promise
const PROMISE_STATUS_PENDING = "pending";
const PROMISE_STATUS_FULFILLED = "fulfilled";
const PROMISE_STATUS_REJECTED = "rejected";const execFunctionWithCatchError = (execFn, value, resolve, reject) => {try {const res = execFn(value);resolve(res);} catch (error) {reject(error);}
};class LcPromise {constructor(executed) {this.status = PROMISE_STATUS_PENDING;this.value = undefined;this.reason = undefined;this.onFulfilledFns = [];this.onRejectedFns = [];const resolve = (value) => {this.value = value;queueMicrotask(() => {if (this.status != PROMISE_STATUS_PENDING) return;this.status = PROMISE_STATUS_FULFILLED;this.onFulfilledFns.forEach((fns) => fns(this.value));});};const reject = (reason) => {this.reason = reason;queueMicrotask(() => {if (this.status != PROMISE_STATUS_PENDING) return;this.status = PROMISE_STATUS_REJECTED;this.onRejectedFns.forEach((fns) => fns(this.reason));});};executed(resolve, reject);}then(onFulfilled, onRejected) {onFulfilled = onFulfilled || ((value) => value);onRejected =onRejected ||((err) => {throw err;});return new LcPromise((resolve, reject) => {// 在 resolve reject 中执行if (onFulfilled)this.onFulfilledFns.push(() => {execFunctionWithCatchError(onFulfilled, this.value, resolve, reject);});if (onRejected)this.onRejectedFns.push(() => {execFunctionWithCatchError(onRejected, this.reason, resolve, reject);});// 在自身中执行if (this.status === PROMISE_STATUS_FULFILLED) {execFunctionWithCatchError(onFulfilled, this.value, resolve, reject);}if (this.status === PROMISE_STATUS_REJECTED) {execFunctionWithCatchError(onRejected, this.reason, resolve, reject);}});}catch(onRejected) {return this.then(undefined, onRejected);}finally(fn) {this.then(fn, fn);}static resolve(value) {return new LcPromise((resolve, reject) => resolve(value));}static reject(reason) {return new LcPromise((resolve, reject) => reject(reason));}static all(promiseArr) {const allResult = [];return new LcPromise((resolve, reject) => {promiseArr.forEach((promise) => {// 执行每个 promise 实例promise.then((res) => {// 收集每个 promise 的成功结果allResult.push(res);// 当收集完所有的 promise，说明整体的 promise 应该为 fulfilled 状态了，执行 resolveif (allResult.length === promiseArr.length) resolve(allResult);},(err) => {// 只要有一个 promise rejected 了，就执行整个 promise 的 reject 函数reject(err);});});});}static allSettled(promiseArr) {const allResult = [];return new LcPromise((resolve, reject) => {promiseArr.forEach((promise) => {promise.then((res) => {allResult.push({ status: "fulfilled", res: res });if (allResult.length === promiseArr.length) resolve(allResult);},(err) => {allResult.push({ status: "rejected", err: err });if (allResult.length === promiseArr.length) resolve(allResult);});});});}static race(promiseArr) {return new LcPromise((resolve, reject) => {promiseArr.forEach((promise) => {promise.then((res) => {resolve(res);},(err) => {reject(err);});});});}static any(promiseArr) {return new LcPromise((resolve, reject) => {const reasonArr = [];promiseArr.forEach((promise) => {promise.then((res) => {resolve(res);},(err) => {reasonArr.push(err);if (promiseArr.length === reasonArr.length)reject(new AggregateError(reasonArr));});});});}
}
