手写Promise深度理解Promise

Promise分析：

 Promise 是异步编程的一种解决方案，从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。
 一般来说我们会碰到的回调嵌套都不会很多，一般就一到两级，但是某些情况下，回调嵌套很多时，
 代码就会非常繁琐，会给我们的编程带来很多的麻烦，这种情况俗称——回调地狱。

Promise是用来解决两个问题的：

 1.回调地狱，代码难以维护，常常第一个的函数的输出是第二个函数的输入这种现象
 2.promise可以支持多个并发的请求，获取并发请求中的数据

Promise 就是一个类 在执行这个类的时候，需要传递一个执行器进去，执行器会立即执行

Promise 中有三种状态 ：Pending（进行中，初始状态，既不是成功，也不是失败状态。）、Resolved（已完成，又称 Fulfilled）、Rejected（已失败）

  这三种状态的变化途径只有2种：
     异步操作从 未完成 pending => 已完成 resolved
     异步操作从 未完成 pending => 失败 rejected
  状态一旦改变，就无法再次改变状态，这也是它名字 promise 承诺 的由来，
  一个promise对象只能改变一次
   resolve和reject函数是用来更改状态的
        resolve: resolved
        reject: rejected

then方法 以及 链式调用

  方法内部做的事情就是判断状态 then方法可以接受两个参数，第一个对应resolve的回调，第二个对应reject的回调。
  then方式是被定义在原型对象中的。then成功回调有一个参数 表示成功之后的值 then失败回调有一个参数 表示失败的原因。
  then可以向下链式操作。 在promise中，要实现链式调用返回的结果是返回一个新的promise
  第一次then中返回的结果，无论是成功或失败，都将返回到下一次then中的成功态中，
  但在第一次then中如果抛出异常错误，则将返回到下一次then中的失败态中

catch方法

和then的第二个参数一样，用来指定reject的回调。

all方法

  提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。
  有了all，你就可以并行执行多个异步操作，并且在一个回调中处理所有的返回数据。
  有一个场景是很适合用，打开网页时，预先加载需要用到的各种资源如图片、flash以及各种静态文件。
  所有的都加载完后，我们再进行页面的初始化。

race方法

  用法 谁跑的快，以谁为准执行回调。
  使用场景：比如我们可以用race给某个异步请求设置超时时间，并且在超时后执行相应的操作

暂时先写这么多 下面 手写 promise 类 深入理解promise

const PENDING = 'pending';  // 初始状态
const RESOVLED = 'resolved'; // 解决 成功
const REJECTED = 'rejected'; // 拒绝 失败

class MyPromise{
    //构造方法
    constructor(executor){
        // 添加属性 promiseResult  promiseState
        // 存储promise结果
        this.promiseResult = null;
        // 存储promise的状态
        this.promiseState = PENDING;
        // 存储多个回调集合  每个元素的结构：onResolved(){},onRejected(){}
        this.callbacks = []
        // 存贮this
        const self = this
        // resolve函数
        const resolve = (data) =>{
            //判断状态  仅在promiseState为pending的时候变化
            if(self.promiseState !== PENDING) return
            //修改状态 及 存储 成功的 结果
            self.promiseState = RESOVLED  //调用resolve后，需要将状态改变成为resolved
            self.promiseResult = data      //保存data数据
            //如果有未执行的callback，则立即异步执行onResolved,是包含两个回调的对象
            if(self.callbacks.length){
                // [*注] setTimeout只能将任务变更为宏观异步任务。原装的Promise是微观异步任务。
                setTimeout(() => {
                    self.callbacks.forEach( item =>{
                        item.onResolved(data)
                    })
                })
            }
        }
        // reject 函数
        const reject = (data) =>{
             //判断状态  仅在promiseState为pending的时候变化
             if(self.promiseState !== PENDING) return
             //修改状态 及 存储 成功的 结果
             self.promiseState = REJECTED  //调用reject后，需要将状态改变成为rejected
             self.promiseResult = data      //保存data数据
             //如果有未执行的callback，则立即异步执行onRejected,是包含两个回调的对象
             if(self.callbacks.length){
                 setTimeout(() => {
                     self.callbacks.forEach( item =>{
                         item.onRejected(data)
                     })
                 })
             }
        }
        // 执行器函数executor，会立即执行，它接受两个参数，一个成功的回调，一个失败的回调 
        // 除了resolve和reject,还有可能自己抛出异常，会失败，此时需要一个try catch
        try{
            executor(resolve,reject)
        }catch(err){
            reject(err)
        }
    }
    //then 方法   异步任务
    then(onResolved,onRejected){
        const self = this
        //  判断回调函数参数
        //  指定回调函数的默认值(必须是函数)
        onResolved = typeof onResolved === 'function'?onResolved:value =>value  //继续向下传递
        onRejected = typeof onRejected ==='function'? onRejected:reason =>{throw reason}  //抛出异常

        return new MyPromise((resolve,reject) =>{
            //封装函数
            const handleCallback = (callback) =>{
                try {
                    // 获取回调的执行结果
                    const res = callback(self.promiseResult)
                    if(res instanceof MyPromise){
                        //如果 结果是 个 MyPromise 对象
                        res.then( value => {
                            resolve(value)
                        },
                        reason => {
                            reject(reason)
                        })
                    }else{
                        //结果的 对象 状态 为 成功
                        resolve(res)
                    }
                } catch (err) {
                    reject(err);
                }
            }
            //根据状态  调用回调函数
            if(self.promiseState === PENDING){
                //  如果是pending状态，则异步任务，在改变状态的时候去调用回调函数
                //  所以要保存回调函数
                //  因为promise实例可以指定多个回调，于是采用数组 
                self.callbacks.push({
                    onResolved:()=>{
                        handleCallback(onResolved)
                    },
                    onRejected:()=>{
                        handleCallback(onRejected)
                    }
                })
            }else if(self.promiseState === RESOVLED){
                handleCallback(onResolved)
            }else if(self.promiseState === REJECTED){
                handleCallback(onRejected)
            }
        })
    }
    //catch 方法  异常穿透
    catch(onRejected){
        return this.then(undefined,onRejected)
    }

    // 静态方法只能通过类本身来调用
    // resolve 方法   
    static resolve(value){
        // 返回一个promise对象
        return new MyPromise((resolve, reject) => {
            // 如果是MyPromise对象
            if (value instanceof MyPromise) {
              value.then(val => resolve(val), err => reject(err));
            } else {
              resolve(value);
            }
          })
    }
    // reject 方法
    static reject(error) {
        return new MyPromise((resolve, reject) => {
          reject(error);
        })
    }
    // all 方法
    static all(promiseArrays) {
        return new MyPromise((resolve, reject) => {
          // 用以存储执行的结果
          let results = [];
		  // 获取 promiseArrays 长度 用于 判断所有都执行完毕 条件
          const length  = promiseArrays.length;
          promiseArrays.forEach((promiseObj, index) => {
            promiseObj.then( val => {
              results.push(val);
              // 由于是多个异步任务的关系，需要判断是否都执行完毕
              if (results.length === length) {
                resolve(results);
              }
            }, err => {
              // 如有错误，则reject
              reject(err);
            });
          })
        })
    }
    // race方法
    static race(promiseArrays) {
        return new MyPromise((resolve, reject) => {
        promiseArrays.forEach( promiseObj => {
            promiseObj.then(val => {
                resolve(val);
            }, err => {
                reject(err);
            });
        })
        })
    }
}