手写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)); // 1Promise.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的解释。

  1. 承受一个数组,如果数组中有非promise对象,则转换成promise对象
  2. 返回一个promise实例
  3. 数组中所有promise执行胜利之后才返回胜利状态,并且返回的promise的值就是所有promise执行胜利的状态值
  4. 如果有一个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的残缺代码