手写 Promise 静态方法
Posted 卡列尼娜翠花
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手写 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 状态了，执行 resolve
if (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));
// hhh
LcPromise.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 状态了，执行 resolve
if (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);
);
);
);
JS手写面试题 --- Promise 以及相关方法的实现
JS手写面试题 --- Promise 以及相关方法的实现
题目描述: 手写 Promise 以及 Promise.all Promise.race 的实现
实现代码如下:
class MyPromise {
constructor(fn) {
// 表示状态
this.state = "pendings";
// 表示 then 注册的成功函数
this.successFun = [];
// 表示 then 注册失败的函数
this.failFun = [];
let resolve = (val) => {
// 保持状态改变不可变（resolve 和 reject 只准触发一种）
if (this.state !== "pending") return;
// 成功触发时机 改变状态 同时执行在 then 注册的回调事件
this.state = "success";
// 为了保证 then 事件先注册（主要是考虑在 promise 里面同步代码
// promise 规范 这里为模拟异步
setTimeout(() => {
// 执行当前事件里面的所有注册函数
this.successFun.forEach((item) => item.call(this, val));
});
};
let reject = (err) => {
if (this.state !== "pending") return;
// 失败触发时机 改变状态 同时执行在 then 注册的回调事件
this.state = "fail";
// 为了保证 then 事件先注册 （主要是考虑在promise里面写同步代码） promise规范 这里模拟异步
setTimeout(() => {
this.failFun.forEach((item) => item.call(this, err));
});
};
// 调用函数
try {
fn(resolve, reject);
} catch (e) {
reject(e);
}
}
// 实例方法 then
then(resolveCallback, rejectCallback) {
// 判断回调是否为函数
resolveCallback =
typeof resolveCallback !== "function" ?
(v) => v : resolveCallback;
rejectCallback =
typeof rejectCallback !== "function"
? (err) => {
throw err;
}
: rejectCallback;
// 为了保持链式调用 继续返回 promise
return new MyPromise((resolve, reject) => {
// 将回调注册到 successFun 事件集合到里面去
this.successFun.push((val) => {
try {
// 执行回调函数
let x = resolveCallback(val);
//最难的一点
// 如果回调函数是普通值 那么就 resolve 出去给下一个 then
// 链式调用 如果是一个 promise 对象 （代表又是一个异步）
// 那么就调用 x 的 then 方法 将 resolve 和 reject 传进去
// 等到 x 内部的异步
// 执行完毕的时候（状态完成）
// 就会自动执行传入的 resolve
// 这样就控制了链式调用的顺序了！
x instanceof MyPromise ? x.then(resolve, reject) : resolve(x);
} catch (e) {
reject(e);
}
});
this.failFun.push((val) => {
try {
// 执行回调函数
let x = rejectCallback(val);
x instanceof MyPromise ?
x.then(resolve, reject) : reject(x);
} catch (e) {
reject(e);
}
});
});
}
// 静态方法
static all(promiseArr) {
let result = [];
// 声明一个计数器 每一个 promise 返回就加 1
let count = 0;
return new MyPromise((resolve, reject) => {
for (let i = 0; i < promiseArr.length; i++) {
// 这里使用 promise.resolve 包装一下 防止不是 promise 类型传进来！
Promise.resolve(promiseArr[i],then(
(res) => {
// 这里不能直接 push 数组 因为要控制顺序一一对应（原作者之前犯了这个错误）
result[i] = res;
count++;
// 只有全部的 promise 执行成功之后才 resolve 出去
if (count === promiseArr.length) {
resolve(result);
}
},
(err) => {
reject(err);
}
)
);
}
});
}
// 静态方法
static race(promiseArr) {
return new MyPromise((resolve, reject) => {
for (let i = 0; i < promiseArr.length; i++) {
Promise.resolve(promiseArr[i].then(
(res) => {
// promise 数组只要在任何一个 promise 状态变更 就可以返回
resolve(res);
},
(err) => {
reject(err);
}
));
}
});
}
}
// 使用
let promise1 = new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve(123);
}, 2000);
});
let promise2 = new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve(1234);
}, 1000);
});
MyPromise.all([promise1, promise2]).then(res => {
console.log(res);
})
MyPromise.race([promise1, promise2]).then(res => {
console.log(res);
})
promise1.then(
res =>{
console.log(res); // 过两秒输出 123
return new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve("success");
}, 1000);
});
},
err => {
console.log(err);
}
)
.then(
res => {
console.log(res); // 再过一秒输出 success
},
err => {
console.log(err);
}
);
好难！一个一个敲下来的！没有经过测试！慎用！
以上是关于手写 Promise 静态方法的主要内容，如果未能解决你的问题，请参考以下文章