0
点赞
收藏
分享

微信扫一扫

promise me,一定要学会手写一个Promise(七)

慎壹 2022-03-15 阅读 67

将函数的Promise改为class类型的

class Promise {
    constructor() {
        // 添加属性 
        this.PromiseState = 'pending';
        this.PromiseResult = null;
        this.callbacks = [];// 为了多个then链式调用,保存then方法中的参数
        //保存实例对象的this的值
        const self = this;

        function resolve(data) {
            //console.log(this);// window
            // 3. Promise的状态只能修改一次
            if (self.PromiseState !== 'pending') return
            // 1. 修改状态,promiseState
            self.PromiseState = 'resolved';//fullfilled
            // 2. 修改状态值,promiseResult
            self.PromiseResult = data;

            //调用成功的回调,即then函数的第一个参数
            setTimeout(() => {
                self.callbacks.forEach(item => {
                    item.onResolved(data);
                });
            })
        }

        function reject(data) {
            // 3. Promise的状态只能修改一次
            if (self.PromiseState !== 'pending') return
            // 1. 修改状态,promiseState
            self.PromiseState = 'reject';//fullfilled
            // 2. 修改状态值,promiseResult
            self.PromiseResult = data;

            setTimeout(() => {
                self.callbacks.forEach(item => {
                    item.onReject(data);
                });
            })

        }

        try {
            // 执行期的函数,在内部时同步调用的
            excutor(resolve, reject);
        } catch (e) {
            // 修改promise对象的状态和值
            reject(e);
        }
    }

    // then
    then(onResolved, onReject) {
        const self = this;// Promise
        // 判断回调函数参数-原生允许不穿onReject
        if (typeof onReject !== 'function') {
            onReject = reason => {
                throw reason;
            }
        }
        if (typeof onResolved !== 'function') {
            onResolved = value => value;
        }
        return new Promise((resolve, reject) => {
            // 封装函数
            function callback(type) {
                try {
                    let result = type(self.PromiseResult);
                    // 判断result
                    if (result instanceof Promise) {
                        result.then((value) => {
                            resolve(value);
                        }, (reason) => {
                            reject(reason);
                        })
                    } else {
                        // 结果的对象状态为成功
                        resolve(result);
                    }
                } catch (e) {
                    reject(e);
                }
            }
            // 当Promise状态为成功,调用此函数
            if (self.PromiseState === 'resolved') {
                setTimeout(() => {
                    callback(onResolved);
                })
            }
            // 当Promise状态为成功,调用此函数
            if (self.PromiseState === 'reject') {
                setTimeout(() => {
                    callback(onReject);
                })
            }

            // 当excutor的方法体为一个异步函数时,this.PromiseState 为pending
            if (this.PromiseState === 'pending') {
                this.callbacks.push({
                    onReject: function () {
                        callback(onReject);
                    },
                    onResolved: function () {
                        // 判断执行结果
                        callback(onResolved);
                    }
                })
            }
        })

    }
    // catch
    catch(onReject) {
        const self = this;
        return self.then(undefined, onReject);
    }

    // resolve 及以下为类方法,static
    static resolve(value) {
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then(value => {
                    resolve(value);
                }, reason => {
                    reject(reason);
                })
            } else {
                // 状态为成功,值为value
                resolve(value);
            }
        });
    }

    static reject(value) {
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then(value => {
                    resolve(value);
                }, reason => {
                    reject(reason);
                })
            } else {
                // 状态为失败,值为value
                reject(value);
            }
        });
    }

    static all(promises) {
        return new Promise((resolve, reject) => {
            let count = 0;
            let arr = [];
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(
                    v => {
                        // 得到promise的状态为成功
                        count++;
                        //将当前promise成功的结果存入数组中,顺序对应
                        arr[i] = v;
                        //判断promises里的每一个都为成功
                        if (count === promises.length) {
                            resolve(arr);
                        }
                    },
                    r => {
                        // 得到promise的状态为失败
                        reject(r);
                    })
            }
        });
    }

    static race(promises) {
        return new Promise((resolve, reject) => {
            let count = 0;
            let arr = [];
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(
                    v => {
                        resolve(arr);
                    },
                    r => {
                        // 得到promise的状态为失败
                        reject(r);
                    })
            }
        });
    }
}
举报

相关推荐

0 条评论