宏观看Promise

自定义Promise实现，来了解他的运行原理

function MyPromise(executor) {

    // 添加属性
    this.promiseState = 'pendding'; // 默认值是pendding
    this.promiseResult = null;
    // this.callback = {}; // 会存在覆盖的情况
    this.callbacks = []; // 应该使用数组去存所有的回调
    const self = this;
    // resolve函数 
    function resolve(data) {
        // 状态只能改一次
        if(self.promiseState =='pendding') {
            // 这里的this是window
            // 1 修改对象状态promiseState 属于实例对象
            self.promiseState = 'fullfilled'
            // 2 设置对象结果值promiseResult 属于实例对象
            self.promiseResult = data

            // 这里执行回调 异步的时候处理， 这里有缺陷，可以有多个回调
            // if(self.callback.onResolved) {
            //     self.callback.onResolved();
            // }
            // 保证回调时异步执行的
            setTimeout(() => {
                self.callbacks.forEach(item => {
                    item.onResolved()
                })
            })
         
        }
     
    }
    // reject函数
    function reject(data) {
        if(self.promiseState =='pendding') {
            // 1 修改对象状态promiseState 属于实例对象
            self.promiseState = 'rejected'
            // 2 设置对象结果值promiseResult 属于实例对象
            self.promiseResult = data

            // if(self.callback.onRejected) {
            //     self.callback.onRejected();
            // }

            setTimeout(() => {
                self.callbacks.forEach(item => {
                    item.onRejected()
                })
            })
            // self.callbacks.forEach(item => {
            //     item.onRejected()
            // })
        }
        
    }

    // 这里应该加try-catch， 目的是在抛出错误的时候 同样能够改变状态
    try{
        // 同步执行executor
        executor(resolve, reject); // resolve,和reject是函数内部使用的，因此应该在内部声明
    } catch(e) {
        // 修改promise对象状态为失败
        reject(e);
    }
   
}

// 添加then方法
// MyPromise.prototyep.then = function(onResolved, onRejected) {
//     // 调用回调函数,是有条件的通过promiseState  来判断
//     if(this.promiseState =='fullfilled') {
//         onResolved(this.promiseResult);
//     }

//     if(this.promiseState == 'rejected') {
//         onRejected(this.promiseResult);
//     }
    

//     if(this.promiseState == 'pendding') {
//         // 保存回调函数， 因为这里状态不确定，不能直接调用回调,应该先保存下来，在状态改变的时候去调用， 因此在实例对象上声明一个属性callback = {}
//         // this.callback = { // 这种写法有瑕疵，因为可以指定多个回调，而这种方式会覆盖之前的回调，应该用一个数组去存将this.callback 该为this.callbacks
//         //     onResolved:onResolved,
//         //     onRejected: onRejected
//         // }
//         // 缓存所有的回调
//         this.callbacks.push({
//             onResolved:onResolved,
//             onRejected: onRejected
//         })
//     }
// }
// then方法应该返回promsie对象, 该实现由很多重复代码，应该优化
// MyPromise.prototyep.then = function(onResolved, onRejected) {
//     const self = this;
//     return new MyPromise((resolve, reject) => {
//            // 调用回调函数,是有条件的通过promiseState  来判断
//             if(this.promiseState =='fullfilled') {
//                 // 获取回调函数的执行结果
//                 // 解决抛出异常时改变状态
//                 try{
//                     let result = onResolved(this.promiseResult);
//                     if(result instanceof MyPromise) {
//                         result.then(v => {
//                             resolve(v); 
//                         }, r => {
//                             reject(r)
//                         })
//                     } else {
//                         // 结果的对象状态变为成功
//                         resolve(result);
//                     }
//                 }catch(e) {
//                     reject(e)
//                 }
               
//             }

//             if(this.promiseState == 'rejected') {
//                   // 解决抛出异常时改变状态
//                   try{
//                     let result = onRejected(this.promiseResult);
//                     if(result instanceof MyPromise) {
//                         result.then(v => {
//                             resolve(v); 
//                         }, r => {
//                             reject(r)
//                         })
//                     } else {
//                         // 结果的对象状态变为成功
//                         resolve(result);
//                     }
//                 }catch(e) {
//                     reject(e)
//                 }
               
//             }
            

//             if(this.promiseState == 'pendding') {
//                 // 保存回调函数， 因为这里状态不确定，不能直接调用回调,应该先保存下来，在状态改变的时候去调用， 因此在实例对象上声明一个属性callback = {}
//                 // this.callback = { // 这种写法有瑕疵，因为可以指定多个回调，而这种方式会覆盖之前的回调，应该用一个数组去存将this.callback 该为this.callbacks
//                 //     onResolved:onResolved,
//                 //     onRejected: onRejected
//                 // }
//                 // 缓存所有的回调, 异步回调的时候这种写法也有问题
//                 // this.callbacks.push({
//                 //     onResolved:onResolved,
//                 //     onRejected: onRejected
//                 // })

//                 this.callbacks.push({
//                     onResolved: function() {
//                         try{
//                             console.log('success')
//                             // 执行成功的回调函数,根据其结果改变状态
//                             let result = onResolved(self.promiseResult)
//                             if(result instanceof MyPromise) {
//                                 result.then(v => {
//                                     resolve(v);
//                                 }, r => {
//                                     reject(r);
//                                 })
//                             } else{
//                                 resolve(resulte)
//                             }
//                         }catch(e){
//                             reject(e)
//                         }
                
//                     },
//                     onRejected: function () {
//                        try{
//                             let result =  onRejected(self.promiseResult)
//                             if(result instanceof MyPromise) {
//                                 result.then(v => {
//                                     resolve(v);
//                                 }, r => {
//                                     reject(r);
//                                 })
//                             } else{
//                                 resolve(resulte)
//                             }
//                        }catch(e){
//                             reject(e);
//                        }
                       
//                     }
//                 }) 
//              }
//     })
 
// }

// 优化then方法

MyPromise.prototyep.then = function(onResolved, onRejected) {
    const self = this;
    // 判断回调函数
    if(typeof onRejected !== 'function') { // 这里给定默认值是因为在发生错误的时候会调用该函数，
        onRejected = reason => {
            throw reason
        }
    }

    if(typeof onResolved !== 'function') { // 这里给定默认值是因为在发生错误的时候会调用该函数，
        onResolved = value => value;
    }
    return new MyPromise((resolve, reject) => {

            // 封装函数
            function callback(type) {
                try{
                    let result = type(self.promiseResult);
                    if(result instanceof MyPromise) {
                        result.then(v => {
                            resolve(v); 
                        }, r => {
                            reject(r)
                        })
                    } else {
                        // 结果的对象状态变为成功
                        resolve(result);
                    }
                }catch(e) {
                    reject(e)
                }
            }
           // 调用回调函数,是有条件的通过promiseState  来判断
            if(this.promiseState =='fullfilled') {
                // 获取回调函数的执行结果
                // 解决抛出异常时改变状态
                setTimeout(function () {
                    callback(onResolved)
                })
               
               
            }

            if(this.promiseState == 'rejected') {
                  // 解决抛出异常时改变状态
                
                  setTimeout(function () {
                    callback(onRejected)
                 })
            }
            

            if(this.promiseState == 'pendding') {
                // 保存回调函数， 因为这里状态不确定，不能直接调用回调,应该先保存下来，在状态改变的时候去调用， 因此在实例对象上声明一个属性callback = {}
                // this.callback = { // 这种写法有瑕疵，因为可以指定多个回调，而这种方式会覆盖之前的回调，应该用一个数组去存将this.callback 该为this.callbacks
                //     onResolved:onResolved,
                //     onRejected: onRejected
                // }
                // 缓存所有的回调, 异步回调的时候这种写法也有问题
                // this.callbacks.push({
                //     onResolved:onResolved,
                //     onRejected: onRejected
                // })

                this.callbacks.push({
                    onResolved: function() {
                        callback(onResolved)
                    },
                    onRejected: function () {
                        callback(onRejected)
                    }
                }) 
             }
    })
 
}


// 添加catch方法
MyPromise.promiseState.catch = function (onRejected) {
    return this.then(undefined, onRejected)
}

// MyPromise.resolve() 快速创建一个promise对象
MyPromise.resolve = function (value) {
    return new MyPromise((resolve, reject) => {
        if(value instanceof MyPromise) {
            value.then(v => {
                resolve(v);
            }, r => {
                reject(r);
            })
        } else {
            // 设置状态为成功
            resolve(value)
        }
    })
}


MyPromise.reject = function (reason){
    return MyPromise((reason, reject) => {
        reject(reason)
    })
}

// Promise.all
MyPromise.all = function (promises) {
    return new MyPromise((resolve, reject) => {
        let count = 0;
        let arr = []; // 存结果
        for(let i = 0; i < promises.length; i++) {
            promises[i].then(v=>{
                // resolve() 这里直接调用不对，应该三个都成功才能resolve
                count++;
                arr[i] = v;
                if(count === promises.length) { // 说明都成功了
                    resolve(arr);
                }
            }, r=>{
                reject(); 
            })
        }
    })
}

MyPromise.race = function (promises) {
    return MyPromise((resolve, reject) => {
        for(let i = 0; i < promises.length; i++) {
            promises[i].then(v=>{
               resolve(v); // 谁先运行谁先决定结果
            }, r=>{
                reject(); 
            })
        }
    })
}