ES6_Promise.js

class Promise {
    constructor(executer) {
        this.PromiseState = 'pending';//默认应该是等待
        this.PromiseResult = undefined;
        //定义一个属性来存放then函数的回调们。
        this.callbacks = [];

        //参数executer是一个立即调用的函数
        //且该函数还接收两个参数，分别是两个函数
        const success = (data) => {
            //这是resolve对应的回调
            //状态改变后就不能再变，加个判断
            if (this.PromiseState !== 'pending') return;
            //1.改变对象的状态：pending=>resolved
            this.PromiseState = 'resolved';
            //2.改变对象的结果值
            this.PromiseResult = data;
            //3.如果是异步，要在以上步骤结束后，执行对应的回调
            // if(this.callback.onResolved){
            // this.callback.onResolved(data);
            // }
            if (this.callbacks.length != 0) {
                setTimeout(() => {
                    this.callbacks.forEach(item => {
                        item.onResolved();
                    })
                });
            }
        }

        const fail = (data) => {
            //这是reject对应的回调
            //状态改变后就不能再变，加个判断
            if (this.PromiseState !== 'pending') return;
            //1.改变对象的状态：pending=>resolved
            this.PromiseState = 'rejected';
            //2.改变对象的结果值
            this.PromiseResult = data;
            //3.如果是异步，要在以上步骤结束后，执行对应的回调
            // if(this.callback.onRejected) {
            // this.callback.onRejected(data);
            // }
            if (this.callbacks.length != 0) {
                setTimeout(() => {
                    this.callbacks.forEach(item => {
                        item.onRejected();
                    })
                });
            }
        }

        try {
            executer(success, fail);
        } catch (data) {
            //如果抛出错误，那么就执行下面的代码
            fail(data);
        }
    }

    //1.then方法的封装
    then(onResolved, onRejected) {
        //判断第二个回调是否存在,没有就写个默认的
        if (typeof onRejected !== 'function') {
            onRejected = err => {
                console.log('第二个默认回调执行');
                throw err;//一直往后找错误的回调
            }
        }
        //如果不写第一个回调，也能实现值的传递
        if (typeof onResolved !== 'function') {
            onResolved = res => {
                console.log('第一个默认回调执行');
                return res;
            };
        }
        //执行then方法返回的还是Promise
        return new Promise((resolve, reject) => {
            //公共的改变返回Promise状态的方法封装起来
            let changeState = (name) => {
                try {
                    const outcome = name(this.PromiseResult);
                    //判断回调返回结果是否是Promise类型
                    if (outcome instanceof Promise) {
                        //Promise类型的数据，返回状态要和它一致
                        outcome.then(res => {
                            //如果是成功的Promise，那一定会走这个回调
                            resolve(res);
                        }, err => {
                            //如果是失败的Promise，那一定会走这个回调
                            reject(err);
                        })
                    } else {
                        //非Promise类型，返回成功的Promise
                        resolve(outcome);
                    }
                } catch (e) {
                    reject(e);
                }
            }
            //判断同步任务下走哪个回调
            if (this.PromiseState === 'resolved') {
                setTimeout(() => {
                    changeState(onResolved);
                });
                //如果抛出错误,不用再另外写try-catch,封装时写过了
                //所以任何Promise实例执行器函数出现错误，都可以直接捕获
            }
            if (this.PromiseState === 'rejected') {
                setTimeout(() => {
                    changeState(onRejected);
                });
            }
            //如果是异步任务（先指定回调再改变状态再执行回调）
            if (this.PromiseState === 'pending') {
                //把回调存到该实例的属性上
                // this.callback.onResolved = onResolved;
                // this.callback.onRejected = onRejected;
                this.callbacks.push({
                    onResolved: () => {
                        changeState(onResolved);
                    },
                    onRejected: () => {
                        changeState(onRejected);
                    }
                })
            }
        })
    }

    //2.catch方法的封装
    catch(onRejected) {
        return this.then(undefined, onRejected);
    }

    //不是实例身上的方法，加上static关键字
    //3.resolve方法封装
    static resolve(data) {
        return new Promise((resolve, reject) => {
            if (data instanceof Promise) {
                data.then(res => {
                    resolve(res);
                }, err => {
                    reject(err);
                })
            } else {
                resolve(data);
            }
        })
    }

    //4.reject方法封装
    static reject(data) {
        return new Promise((resolve, reject) => {
            reject(data);
        })
    }

    //5.all方法封装
    static all(promiseArr) {
        return new Promise((resolve, reject) => {
            let flag = true; //判断是否所有都成功
            let arr = []; //存储成功的结果
            for (let i = 0; i < promiseArr.length; i++) {
                promiseArr[i].then(res => {
                    // arr.push(res); //这么写可能会由于异步出现顺序问题
                    arr[i] = res;  //这么写没事,是let的块级作用域效果
                }, err => {
                    reject(err);
                    flag = false;
                })
            }
            //循环结束后，判断是否所有Promise都是成功的
            if (flag) {
                resolve(arr);
            }
        })
    }

    //6.race方法封装
    static race(promiseArr) {
        return new Promise((resolve, reject) => {
            for (let i = 0; i < promiseArr.length; i++) {
                promiseArr[i].then(res => {
                    resolve(res);
                }, err => {
                    reject(err);
                })
            }
        })
    }
}