手写Promise – 实现一个根底的Promise
手写Promise – 实例办法catch、finally
手写Promise – 罕用静态方法all、any、resolve、reject、race
先来回顾一下，上一章节之后的代码。
class WPromise {
static pending = 'pending';
static fulfilled = 'fulfilled';
static rejected = 'rejected';
constructor(executor) {
this.status = WPromise.pending; // 初始化状态为pending
this.value = undefined; // 存储 this._resolve 即操作胜利 返回的值
this.reason = undefined; // 存储 this._reject 即操作失败 返回的值
// 存储then中传入的参数
// 至于为什么是数组呢？因为同一个Promise的then办法能够调用屡次
this.callbacks = [];
executor(this._resolve.bind(this), this._reject.bind(this));
}
// onFulfilled 是胜利时执行的函数
// onRejected 是失败时执行的函数
then(onFulfilled, onRejected) {
// 返回一个新的Promise
return new WPromise((nextResolve, nextReject) => {
// 这里之所以把下一个Promsie的resolve函数和reject函数也存在callback中
// 是为了将onFulfilled的执行后果通过nextResolve传入到下一个Promise作为它的value值
this._handler({
nextResolve,
nextReject,
onFulfilled,
onRejected
});
});
}
// catch办法只有一个参数用于处理错误的状况
catch(onRejected) {
return this.then(null, onRejected);
}
finally(onFinally) {
return this.then(onFinally, onFinally);
}
_resolve(value) {
// 解决onFulfilled执行后果是一个Promise时的状况
// 这里可能了解起来有点艰难
// 当value instanof WPromise时，阐明以后Promise必定不会是第一个Promise
// 而是后续then办法返回的Promise（第二个Promise）
// 咱们要获取的是value中的value值（有点绕，value是个promise时，那么外部存有个value的变量）
// 怎么将value的value值获取到呢，能够将传递一个函数作为value.then的onFulfilled参数
// 那么在value的外部则会执行这个函数，咱们只须要将以后Promise的value值赋值为value的value即可
if (value instanceof WPromise) {
value.then(
this._resolve.bind(this),
this._reject.bind(this)
);
return;
}
this.value = value;
this.status = WPromise.fulfilled; // 将状态设置为胜利
// 告诉事件执行
this.callbacks.forEach(cb => this._handler(cb));
}
_reject(reason) {
if (reason instanceof WPromise) {
reason.then(
this._resolve.bind(this),
this._reject.bind(this)
);
return;
}
this.reason = reason;
this.status = WPromise.rejected; // 将状态设置为失败
this.callbacks.forEach(cb => this._handler(cb));
}
_handler(callback) {
const {
onFulfilled,
onRejected,
nextResolve,
nextReject
} = callback;
if (this.status === WPromise.pending) {
this.callbacks.push(callback);
return;
}
if (this.status === WPromise.fulfilled) {
// 传入存储的值
// 未传入onFulfilled时，将undefined传入
const nextValue = onFulfilled
? onFulfilled(this.value)
: this.value;
nextResolve(nextValue);
return;
}
if (this.status === WPromise.rejected) {
// 传入存储的错误信息
// 同样的解决
const nextReason = onRejected
? onRejected(this.reason)
: this.reason;
nextReject(nextReason);
}
}
}本章节持续欠缺它，向Promise类中增加静态方法resolve、reject、all、race。
Resolve、Reject
Promise.resolve(1).then(data => console.log(data)); // 1
Promise.resolve(new Promise((resolve) => resolve(2))).then(data => console.log(data)); // 2不言而喻，Promise.resolve(value)只是一个resolve的语法糖，返回一个Promise对象。须要留神的一点是如果value自身就是一个promise或者含有then办法的对象，那么就间接返回value。
代码如下：
class WPromise {
...
// reject的实现是一样的，只是最初调用的是reject而不是resolve办法
static resolve(value) {
// 判断是否是thenable对象
if (value instanceof WPromise || ((typeof value === 'object') && 'then' in value)) {
return value;
}
return new WPromise((resolve) => resolve(value));
}
...
}Promise.all
Promise.all(iterable) 办法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“实现（resolved）”或参数中不蕴含 promise 时回调实现（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败的起因是第一个失败 promise 的后果。
下面是MDN上对于Promise.all的解释。
- 承受一个数组，如果数组中有非promise对象，则转换成promise对象
- 返回一个promise实例
- 数组中所有promise执行胜利之后才返回胜利状态，并且返回的promise的值就是所有promise执行胜利的状态值
- 如果有一个promise执行失败，则返回失败，并且返回的promise的值就是第一个promise失败的起因
class WPromise {
...
static all(iterable) {
return new WPromise((resolve, reject) => {
const ret = [];
let count = 0;
Array.from(iterable).forEach((item, index) => {
WPromise.resolve(item).then(data => {
ret[index] = data;
count++;
if (count === iterable.length) {
resolve(ret);
}
}, reject);
});
});
}
...
}Promise.race
Promise.race(iterable) 办法返回一个 promise，一旦迭代器中的某个promise解决或回绝，返回的 promise就会解决或回绝。
这个没啥好说的，间接就是返回一个Promise就完事。
class WPromise {
...
static race(iterable) {
return new WPromise((resolve, reject) => {
Array.from(iterable).forEach(item => {
WPromise.resolve(item).then(resolve, reject);
});
});
}
...
}以上内容，根本就是所有的Promise的内容了。当然还有很多细节的方面没有解决，如果异样解决、边界断定等等。
更多：上述模仿Promise的残缺代码
发表回复