Promise从基础到装逼

2020/5/31 15:43:58 人评论 次浏览 分类:学习教程

二、Promise基础

(1):Promise是什么?和基本使用

1:Promise是什么

  抽象解析:
    01:Promise是JS中进行异步编程的新的解决方案! (旧的方案是纯回调函数形式 --- 产生回调地狱!)
  具体解析:
    02:从语法上看Promise是一个构造函数! (new Promise ---执行构造函数,返回实例对象)
    03:从功能上看,Promise对象用来封装了一个异步操作,里面还能获取其结果

2:Promise状态

    初始状态为pending ---未确定的
	01:pending变为fulfilled(resolve)  ---满足阶段 ---会回调then()
    02:pending变为rejected(reject)  ---未决定,履行,拒绝阶段  --- 会回调catch()
    Promise的状态只有上述两种状态切换,而且Promise对象只能改变一次
      无论成功还是失败,都会返回一个数据,成功的为value,失败的为reason

3:执行流程

创建和执行流程
第一步:创建一个Promise构造函数,返回一个promise对象,里面传入的是一个执行器函数(同步函数)
第二步:执行器函数里面有两个参数,参数1为成功的回调,参数2为失败的回调,判断成功与失败,里面含有数据
第三步:再.then方法中判断里面的是否是函数,若是函数就执行,否则就忽略。
第四步:再.then方法中,onFulfilled为函数就调用resolve('-成功的数据') 里面的数据,失败也是同理回调,输出数据!


注意点1:resolve函数的作用,就是把promise对象的状态从“未完成”变为成功,(即peding-resolved),在异步操作成功时调用,并且将异步操作结果,作为参数传递出去!
注意点2:reject函数的作用,就是把promise对象的状态从“未完成”变为失败,(即peding-rejected),在异步操作失败时调用,并且将异步操作结果,作为参数传递出去!
注意点3:Promise实例生成后,可以使用then方法分别指定resolve状态和rejected状态的回调函数!
注意点4:一个 promise 必须提供一个 then 方法以访问其当前值、终值和据因
promise 的 then 方法接受两个参数,promise.then(onFulfilled, onRejected),这两个都是可选参数

在这里插入图片描述
4:Promise的基本使用

 //1:创建一个Promise对象 
    const p = new Promise((resolve, reject) => { //执行器函数(传入的回调函数 作为Promise对象的参数)
      //2:执行异步操作
      setTimeout(() => {
        const time = Date.now();
        if (time % 2 === 0) { //假如这边偶数为成功,否则为失败
          //3-1:如果成功了,那么就调用resolve(value)
          resolve('成功的time:' + time)
        } else {
          //3-2:然后失败了,那么就调用reject(reason)
          reject('失败的time:' + time)
        }
      }, 1000)

    })
    // 注意点 一旦调用resovel便会执行then里面的回调函数 调用reject也是!
    p.then(
      value => { //接受到成功的value数据  onFulfilled()
        console.log('成功的回调', value);
      },
      reason=> { //接受到失败的reason数据  onRejected()
        console.log(reason);
      }
    )

(2):为什么使用Promise

1:指定的回调函数更加灵活:

    旧的:必须在启动异步任务前指定
    promise:启动异步任务 =>返回promise对象 =>给promise对象绑定回调函数
    而promise是一般是启动异步任务之后,才指定回调函数!也可以等有了结果,在指定!

2:promise支持链式调用的,可以解决回调地狱!

    什么是回调地狱?回调函数嵌套调用(一个异步操作嵌套一个异步操作。。。),外部嵌套函数异步的执行结果为内层的嵌套函数的执行条件
    回调地狱的缺点? 阅读性差,不便于处理异常
    解决方案1:Promise链式调用;
    但是async/await更为简洁,是最好的方式!
    
    注意点:
      使用promise的话,就封装一个异步操作的函数,返回一个promise对象,
      一个Promise对应一个异步任务(一旦返回一个promise对象,就说明了启动了一个异步任务)
    // 2.1,回调地狱	
    doSomething(function (result) {
      doSomethingElse(result, function (newResult) {
        doThirdThing(newResult, function (finalResult) {
          console.log('Got the final result: ' + finalResult)
        }, failureCallback)
      }, failureCallback)
    }, failureCallback)
    //多个串联的异步操作:也就是说第一个弄完后才弄第二个

    // 2.2.使用 promise的链式调用解决回调地狱
    dosomething()
      //dosomething() 假如为一个封装的异步操作函数,返回的是promise对象,就是启动了异步任务! .then()为成功的回调,result为收到的结果
      .then(function (result) {//result为第一个promise返回的数据
        return dosomethingElse(result) //result作为条件传入第二个回调函数中,调用了第二个异步任务了
      })
      .then(function (newResult) { //这边的.then()为第二个异步任务的回调结果! --newResult
        return doThirdThing(newResult) //调用了第三个异步任务了
      })
      .then(function (finalResult) { //这边的.then()为第三个异步任务的回调结果! --finalResult
        console.log('Got the final result:' + finalResult)
      })
      .catch(failurecallback)
    //优点:失败的回调都直接放置在最后,中间都是成功的回调! 异常传递(中间任何一环出错,这里都会可以打印出来)


    // 2.3 async/await: 回调地狱的终极解决方案(相比较promise,async/await从源码上来看没有回调函数)
    async function request() {
        try {
          const result = await doSomething() //这一段代码必须成功后,才会执行下面的代码,以此类推
          const newResult = await doSomethingElse(result)
          const finalResult = await doThirdThing(newResult)
          console.log('Got the final result' + finalResult)
        } catch (reason) {
          failureCallback(reason)
        }
    }

(3):Promise的API

1:promise语法糖

//需求:产生一个成功值为01的promise对象,并且调用其数据输出
// 01:采用语法糖定义一个promise对象
const p01 = Promise.resolve(01);
p01.then(value => {
  console.log(value);
})
//:02:采用语法糖+链式编程
Promise.resolve(02).then(value => {
  console.log(value);
})

2:Promise.all方法
返回的是一个promise对象,里面的为promise对象组成的数组形式或者可迭代的String

const p1 = Promise.resolve(1);
const p2 = Promise.resolve(2);
const p3 = Promise.reject(3);
假如三个异步任务都是成功的时候,才能获取到数据或继续向下执行,那么使用Promise.all方法极好! 有一个失败就会失败!
//const pAll = Promise.all([p1, p2, p3]); //里面参数为数组形式,p1-p3都为promise对象 结果,由于3为失败,调用onReject()执行reason()
const pAll = Promise.all([p1, p2]);
pAll.then(
  values => {
    console.log('onFulfill()', values);
  },
  reason => {
    console.log('onReject()', reason);
  }
)

3:Promise.race方法
Promise.race()方法,返回一个promise,一旦迭代器中的某个promise解决或拒绝,返回的 promise就会解决或拒绝 看谁先执行最快结束,就看它的结果!

const p1 = Promise.resolve(1);
const p2 = Promise.resolve(2);
const p3 = Promise.reject(3);
// const pRace = Promise.race([p1, p2, p3]); //结果为:race onFulfill() 1 因为都没有设置延迟,先执行1的 成功
const pRace = Promise.race([p3, p2, p1]); //结果为:race onReject() 3 因为都没有设置延迟,先执行3的 失败
pRace.then(
  values => {
    console.log("race onFulfill()", values);
  },
  reason => {
    console.log('race onReject()', reason);
  }
)

(4):Promise几个关键问题解析

1:Promise的状态

  1:resolve --- pending变为resolveed(确定),调用成功
  2:rejecte --- pending变为rejected(失败),调用失败
  3:抛出异常 --- 抛出异常后就是peding变为rejected

2:一个Promise指定多个成功、失败回调函数,都会调用吗?

  当promise改变状态的时候,都会调用!
    //1:创建一个promise对象 --- 里面传入一个执行器函数(同步的回调函数) 执行器函数里面有两个参数(resolve,reject)也是回调函数!
    const p1 = new Promise((resolve, reject) => {
      throw new Error;
      // throw 3; //抛出异常
    })
    p1.then( //指定回调函数
      value => {
        console.log();
      },
      reason => {
        console.log('reason', reason);
      }
    )
    p1.catch(
      reason => {
        console.log('reason2', reason);
      }
    )
    //结果:  reason Error  reason2 Error

3:改变promise状态还有指定回调函数是谁先谁后?

    (1)都有可能,正常情况下,先指定回调函数后在改变状态,但也可以先改变状态在指定回调函数
    (2)如何先改变状态再指定回调函数?
          01方法:在执行器函数中先调用resolve()/reject()
          02方法: 延迟更长时间才调用!
    (3)什么时候才能得到数据?
      01:如果先指定回调函数,那么当状态发生改变的时候,回调函数就被调用并且得到数据
      02:如果先改变状态,那当指定回调函数时,回调函数被调用后,得到数据
     注意点:.then方法里面的value,reason为异步回调函数!

先指定回调函数,再改promise状态

    //先指定回调函数,再改promise状态
    new Promise((resolve, reject) => {
      //执行异步任务
      setInterval(() => { //由于异步任务,有延迟1S,再改变状态(同时指定数据),异步执行回调函数
        resolve(1);
      }, 1000)
    }).then( //先指定回调函数 保存当前指定回调函数!
      value => { //注意点:这是异步回调函数
        console.log('onFulfilled', value);
      },
      reason => {
        console.log('onRejected', reason);
      }
    )

先改变promise状态,再指定回调函数

    //方式1:
    new Promise((resolve, reject) => {
      resolve(1); //先改变状态(同时指定数据)
    }).then( //再指定回调函数,异步执行回调函数(成功还是失败的回调)
      value => {
        console.log('value', value);
      },
      reason => {
        console.log('reason', reason);
      }
    )
    // 方式2
    const p1 = new Promise((resolve, reject) => {
      //执行异步任务
      setInterval(() => { //先改变状态(同时指定数据) 因为then延迟时间比这边长
        resolve(1);
      }, 1000)
    })
    setTimeout(() => {
      p1.then( //再指定回调函数,异步执行回调函数(成功还是失败的回调)
        value => {
          console.log('onFulfilled', value);
        },
        reason => {
          console.log('onRejected', reason);
        }
      )
    }, 1100)

4:Promise.then()返回的是一个新的promise(对象)的结果状态由谁决定?

    (1)简单表达:由.then方法指定的回调函数执行的结果决定!(就是调用.then方法的promise实例)
    (2)详细表达:
        01:如果抛出异常,新的promise变为rejected,reason为抛出的异常
        02:如果返回的是为promise的任意值,新的promise变为resolved,value值为返回的值
        03:如果返回一个新的promise对象,此promise的结果就会成为新的promise的结果!
 //1:请问下面的输出结果为?
    new Promise((resolve, reject) => {
      resolve(1);
      // reject(1);
    }).then( //由于上面new promise函数是失败的,所以调用.then的失败函数
      value => {
        console.log('onFulfiled()', value); //23行
        // return 2;
        // return Promise.resolve(3); //返回一个成功值为3的promise实例
        // return Promise.reject(4); //返回一个失败值为4的promise实例
        throw 5;
      },
      reason => {
        console.log('onRejected()', reason); //26行
      }
    ).then( //因为.then()返回的是一个新的promise对象,才能继续链式.then(), 这边的.then调用有上一层promise函数的执行后的结果!
      value => {
        console.log('onFulfiled2()', value); //30行
      },
      reason => {
        console.log('onRejected2()', reason); //33行
      }
    )
    //当resolve(1)时 --- 结果1为:由于执行了23行和30行 onFulfiled() 1  onFulfiled2() undefined 
    // 解析:为何30行代码输出undefined?,这是因为这边的.then方法是上一层promise函数执行后,却没有返回任何值,也就是undefined
    //若是在23行下添加一个return 2; 那么其结果将会变为onFulfiled2() 2,而非未定义! 若是return Promise.resolve(3); 那么其结果为onFulfiled2()3
    //若返回的是return Promise.reject(4),结果为onRejected2() 4 若是抛出异常throw 5;  结果为:onRejected2() 5

    //就是啊第一个promise执行的是成功,值为1,调用.then后,这个值1为执行结果(首先先判断成功还是失败),
    // 成功时候,就调用下一个.then中成功的回调函数(里面在返回一个值或者新的promise,为调用.then的判断条件!)

//当reject(1)时  执行的是26行,还有30行 ---结果为: onRejected() 1 ,onFulfiled2() undefined

5:Promise如何串联多个操作任务?

    01:promise的then()返回一个新的promise对象,可以看成.then()的链式调用
    02:通过then的链式调用串联多个同步/异步任务!
new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log('执行任务1(异步)');
        resolve(1); //成功的回调,指定数据为1 ---这边是promise.then()后在输入结果,也就是任务1的结果!
        // (成功的时候,调用OnFulfilled(),也就是value =>{} value就是成功的值!
      }, 1000)
    }).then(
      value => {
        console.log('任务1的结果为:', value);
        console.log("执行任务2(同步)");
        return 2;
      }
    ).then(
      value => {
        console.log("任务2的结果为:", value);
        //异步任务需要封装在一个promise对象里面,并且需要确定promise的状态(也就是resolve(3))
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            console.log('执行任务3(异步)');
            resolve(3);
          }, 1000)
        })
      }
    ).then(
      value => {
        console.log("任务3的结果为:", value);
      }
    )
    //注意点:一旦是异步任务的就需要包裹在一个promise对象里面!
    //结果:执行任务1(异步) 任务1的结果为: 1
    // 执行任务2(同步) 任务2的结果为: 2
    //  执行任务3(异步) 任务3的结果为: 3

6:promise的异常传透?

    01:当使用promise的then链式调用时,可以在最后指定失败的回调
    02:前面的任何操作异常,都会传到最后的失败的回调函数中处理!
 new Promise((resolve, reject) => {
      // resolve(1);
      reject(1);
    }).then(
      value => {
        console.log("onFulfilled1()", value);
        return 2;
      },
      // resoan => {
      //   throw reason
      // }
      // reason => Promise.reject(reason) //也可以自己抛出异常
    ).then(
      value => {
        console.log("onFulfilled2()", value);
        return 3;
      }
    ).then(
      value => {
        console.log("onFulfilled3()", value);
        return 4;
      }
    ).catch(
      reason => {
        console.log("onRejected1()", reason);
      }
    )
    //执行结果:onRejected1() 1
    //执行流程:第一个promise执行的时候reject(1)失败,在调用.then方法时候,就是执行失败的回调(也就是reason =>{)},
    //但是若是这边.then()没有写reason =>{。。。},里面会自动帮你补上reason =>{throw reason},然后这边的结果依然是失败状态,继续往下面传透失败的回调结果!
    //注意点:反正就是一个promise对象状态为成功时(指定了数据),并且在.then方法中调用成功的回调,失败也是同理!

7:中断promise链?

    01:当使用promise的链式调用时,在中间中断,不在调用后面的回调函数
    02:办法:在回调函数中返回一个pendding状态的promise对象
 new Promise((resolve, reject) => {
      // resolve(1);
      reject(1);
    }).then(
      value => {
        console.log("onFulfilled1()", value);
        return 2;
      },
      // resoan => {
      //   throw reason
      // }
      // reason => Promise.reject(reason) //也可以自己指定要返回的异常!
    ).then(
      value => {
        console.log("onFulfilled2()", value);
        return 3;
      }
    ).then(
      value => {
        console.log("onFulfilled3()", value);
        return 4;
      }
    ).catch(
      reason => {
        console.log("onRejected1()", reason);
        // throw reason;
        return Promise.reject(reason);
        //这边继续链式.then方法后,需要返回失败的回调,不然就直接调用成功的!后面添加一个新的promise,状态为pedding,直接中断
        // return new Promise(() => {})
      }
    ).then(
      value => {
        console.log("onFulfilled3()", value);
        return 4;
      },
      reason => {
        console.log("onRejected2()", reason);
      }
    )
    //结果:不添加什么就 onRejected1() 1, onFulfilled3() undefined 若是添加失败的回调就:onRejected1() 1 onRejected2() 1
    //结果: return new Promise(() => {})-添加了 onRejected1() 1

三、自定义一个promise的各种方法解析

(1):自定义promise的准备工作

新建一个lib库用于存放自己自定义的promise.js文件
然后向外暴露promise函数,以供外面调用,这就需要使用到ES5中的立即执行函数来导出promise模块
注意点:立即执行函数传入window,是为了让promise函数暴露出来
需要在执行器函数内部定义状态,数据,还有回调函数的缓存!
01:还有需要定义一下,promise的初始状态为pending
02:给promise指定一个存储结果数据的属性
03:定义一个回调函数里面存放着可能待执行的函数(缓存回调函数)
this.callbacks = []; //每一个元素的结构:{onFulfilled(){},onRejected(){}}
04:指定执行器函数和resolve,reject函数同步执行(也就是执行器函数调用这两个函数)!

/*
自定义Promise函数模块
 */
// 使用ES5的模块化 ---立即执行函数
(function (window) {

  /*
    Promise构造函数
    executor:执行器函数
   */
  function Promise(executor) {

    this.status = 'pending'; //给promise对象指定status属性,初始值为pending
    this.data = undefined; //给promise指定一个存储结果数据的属性
    this.callbacks = []; //每一个元素的结构:{onFulfilled(){},onRejected(){}}

    function resolve(value) {

    }

    function reject(reason) {

    }
    //因为使用的时候,在executor执行器函数里面传入了两个回调函数,需要在这边定义一下!
    //立即同步执行exxcutor 
    executor(resolve, reject);

  }
  /*Promise原型对象的then() 
  指定成功和失败的回调函数,并且返回一个新的promise对象
  */
  Promise.prototype.then = function (onFulfilled, onRejected) {

  }

  /*Promise原型对象的catch()
  指定失败的回调函数,并且返回一个新的promise对象
   */
  Promise.prototype.catch = function (onRejected) {

  }

  /*Promise函数对象的resolve方法 
  返回一个指定结果成功值为value的promise
  */
  Promise.resolve = function (value) {

  }

  /*Promise函数对象的reject方法
  返回的是一个指定结果失败值为reason的promise
   */
  Promise.reject = function (reason) {

  }

  /*Promise函数对象的all方法   all方法里面参数是promise对象组成的数组!
  返回的是一个promise,只有数组中的promise都成功的时候才成功,否则有一个失败,就失败!
  */
  Promise.all = function (Promises) {

  }

  /*Promise函数对象的race方法   race方法里面参数是promise对象组成的数组!
  返回的是一个promise,其结果有数组中的promise对象,先完成的promise决定!
  */
  Promise.race = function (Promises) {

  }

  //向外暴露Promise函数
  window.Promise = Promise
})(window)

(2):对于执行器函数内部的定义

首先Promise是个函数,它需要传一个function,就是执行器函数(executor),就相当于我们使用Promise时那个new Promise(function(resolve,reject))中的function()
然后执行器函数里面有两个参数,就是resolve和reject,分别对应的是成功的回调还有失败的回调

因此执行器函数由三部分组成:分别为resolve函数,reject函数,executor同步执行函数
1:resolve函数-代表的是成功时
2:reject函数-代表是失败的时
3:executor函数-执行函数的时候,连带resolve和reject绑定在一起,先被调用执行谁
注意点:需要在resolve和reject函数里面先判断promise状态是否为pending状态,假如不是,直接结束掉,也就是return;
// 因为状态只能改变一次!,一进来就是reject(或resolve)就执行,若是pending就直接结束掉!

  // Promise构造函数  executor:执行器函数
  function Promise(executor) {

    const that = this; //把that指向promise的that存再一个变量中,需要用的时候,就调用!
    that.status = 'pending'; //给promise对象指定status属性,初始值为pending
    that.data = undefined; //给promise指定一个存储结果数据的属性
    that.callbacks = []; //定义一个回调函数里面存放着可能待执行的函数,每一个元素的结构:{onFulfilled(){},onRejected(){}}

    function resolve(value) {
      //00:需要先判断 当前状态是否是pending,如果不是直接结束掉
      if (that.status != 'pending') {
        return
      }

      //01:将状态改为resolved
      that.status = 'resolved'
      //保存value数据
      that.data = value;

      //:02:如果有待执行callback函数,立即异步执行回调函数onFulfilled()(丢到任务队列中)
      if (that.callbacks.length > 0) {
        setTimeout(() => { //03:放入队列中,执行所有成功的回调
          that.callbacks.forEach(callbacksObj => { //遍历出回调函数数组中是否有成功的回调函数
            callbacksObj.onFulfilled(value); //给成功的回调函数指定成功的结果!
          });
        })
      }
    }

    function reject(reason) {
      //需要先判断 当前状态是否是pending,如果不是直接结束掉
      if (that.status != 'pending') {
        return
      }
      that.status = "rejected"
      that.data = reason;
      if (that.callbacks.length > 0) {
        setTimeout(() => {
          that.callbacks.forEach(callbacksObj => {
            callbacksObj.onRejected(reason)
          })
        }, 1000)
      }

    }
    //因为使用的时候,在executor执行器函数里面传入了两个回调函数,需要在这边定义一下!
    //立即同步执行exxcutor 
    try {
      executor(resolve, reject);
    } catch (error) { //然后执行器抛出异常,那么就调用reject失败函数
      reject(error)
    }
  }

(3):对于promise.prototype.then()函数的定义

Promise原型对象的then()
功能:返回一个新的promise对象,并且指定成功和失败的回调函数,
01:返回一个新的prmise对象,使用new Promise里面传入执行器函数
02:并且指定成功和失败的回调函数,那么需要在执行器函数里面
03:在执行器函数里面,就行需要根据promise的状态处于哪个状态来输出结果
001:当前promise的状态为pending时候,将回调函数数据保存起来!
002:如果为resolve成功,那么便调用成功的回调函数(异步任务哦,需要定时器)
003:如果是rejected状态的,失败就需要调用失败的回调函数onRejected()
注意点:that=this;是为了把指向promise的保存起来,避免this指向问题

难点:   promise的结果有着以下三种情况,因此需要补货异常  
  01:如果抛出异常,return的promise就会失败,其reason就是error
  02:如果回调函数返回的不是promise对象,那么return就是成功,其结果就是这个返回值-value
  03:如果回调函数返回的是promise对象(而promise的结果在.then输出,于是需要借用.then方法),那么return的结果就是这个promise的结果(是成功就成功,是失败就失败) 
使用try来补货promise的返回结果(promise对象):这就需要判断是对象还是非对象,使用到instanceof方法,

准备01

/*Promise原型对象的then() 
  返回一个新的promise对象,并且指定成功和失败的回调函数,
  */
  Promise.prototype.then = function (onFulfilled, onRejected) { //onFulfilled形式参数,接受外面的成功的回调,然后指向resolve
    const that = this;

    // 01:返回一个新的promise对象
    return new Promise((resolve, reject) => { //根据里面的状态执行结果,来判断是应该调用成功的回调还是失败的回调
      //02:根据promise的状态来输出结果!
      if (that.status === PENDING) { //假设promise的状态为pending时候,将回调函数数据保存起来!
        that.callbacks.push({
          onFulfilled,
          onRejected
        })
      } else if (that.status === RESOLVED) { //如果为resolve成功,那么便调用成功的回调函数(异步任务哦,需要定时器),传入里面的value
        setTimeout(() => {
          /*
          01:如果抛出异常,return的promise就会失败,其reason就是error
          02:如果回调函数返回的不是promise对象,那么return就是成功,其结果就是这个返回值-value
          03:如果回调函数返回的是promise对象(而promise的结果在.then输出,于是需要借用.then方法),
               那么return的结果就是这个promise的结果(是成功就成功,是失败就失败)
           */
          //注意点1:新的promise的结果,由onFulfilled或onRejected来决定的!
          //注意点2:onFulfilled函数或onRejected函数执行后,根据结果来调用resolve还是reject
          //注意点3:一旦调用了resolve那么返回的promise就是成功,反之亦然就是失败
          //采用捕获的方式,去查看是否抛出异常
          try {
            const result = onFulfilled(that.data); //成功就调用onFulfilled函数( 捕获传递进来的,返回一个promise
            if (result instanceof Promise) { //03:如果回调函数返回的是promise对象,那么return的结果就是这个promise的结果
              //因为result这这边是promise对象,采用promise.then的方法指定成功的回调还有失败的回调!
              result.then(
                value => {
                  resolve(value); //当result成功,让return的promise也成功,这就需要调用resolve并且指定成功;
                },
                reason => {
                  reject(reason); //当result失败,让return的promise也失败,这就需要调用resolve并且指定失败;
                }
              )
            } else { //02:如果回调函数返回的不是promise对象,那么return就是成功,其结果就是这个返回值-value
              resolve(result); //值就是捕获到的结果!
            }
          } catch (error) {
            reject(error)
          }

        })
      } else { //rejected状态的,失败就需要调用失败的回调函数onRejected()
        setTimeout(() => {
          try {
            const result = onRejected(that.data);
            if (result instanceof Promise) {
              result.then(
                value => {
                  resolve(value); //当result成功,让return的promise也成功,这就需要调用resolve并且指定成功;
                },
                reason => {
                  reject(reason); //当result失败,让return的promise也失败,这就需要调用resolve并且指定失败;
                }
              )
            } else { //02:如果回调函数返回的不是promise对象,那么return就是成功,其结果就是这个返回值-value
              resolve(result); //值就是捕获到的结果!
            }
          } catch (error) {
            reject(error)
          }
        })
      }
    })

  }

准备01的简介版

就是在方式的1基础上,对以下这几行代码进行优化

如果回调函数返回的是promise对象(而promise的结果在.then输出,于是需要借用.then方法),那么return的结果就是这个promise的结果(是成功就成功,是失败就失败)
方式1解析:就是Promise对象的成功值为value,其结果为value,然后这个返回的promise的结果根据前面的promise(对象)结果决定的,于是就直接调用resolve并且传递了value即可!
方式2:就是既然第一个promise对象的结果作为条件给了第二个promise的结果,并且还调用了resolve的方式来传值,何不如直接把使用第一个promise调用then方法,里面传递两个回调函数,参数依旧照旧传递即可,这样去掉了外层的函数,效率也就提高了!

 if (result instanceof Promise) {
               // result.then(
              //   value => {
              //     resolve(value)
              //   },
              //   reason => {
              //     reject(reason)
              //   }
              // )
     //上面的代码简洁为下面的一行代码:
     //解析:
     result.then(resolve, reject);
 }

准备02:在01基础上增加条件

由于捕获异常在resolve,reject,还有pending状态的时候保存数据都使用到,因此把这个封装为一个函数(handle),就是调用指定的回调函数处理,根据执行的结果,改变return的promise状态
handel的参数为传入的回调函数-callback;
调用的时候:直接使用handle(成功时候调用的是-onFulfilled),失败的时候调用时onRejected

/*Promise原型对象的then() 
  返回一个新的promise对象,并且指定成功和失败的回调函数,
  */
  Promise.prototype.then = function (onFulfilled, onRejected) { //onFulfilled形式参数,接受外面的成功的回调,然后指向resolve

    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : value => value; //向后面传递value
    onRejected = typeof onRejected === 'function' ? onRejected : reason => {
      throw reason; //指定默认的失败回调,并且将异常穿透下去(向后面传递失败的reason)
    }
    const that = this;

    // 01:返回一个新的promise对象
    return new Promise((resolve, reject) => { //根据里面的状态执行结果,来判断是应该调用成功的回调还是失败的回调
      /*
        调用指定的回调函数处理,根据执行的结果,改变return的promise状态
       */
      function handle(callback) { //handle---处理
        /*
          01:如果抛出异常,return的promise就会失败,其reason就是error
          02:如果回调函数返回的不是promise对象,那么return就是成功,其结果就是这个返回值-value
          03:如果回调函数返回的是promise对象(而promise的结果在.then输出,于是需要借用.then方法),
              那么return的结果就是这个promise的结果(是成功就成功,是失败就失败)
         */
        //注意点1:新的promise的结果,由onFulfilled或onRejected来决定的!
        //注意点2:onFulfilled函数或onRejected函数执行后,根据结果来调用resolve还是reject
        //注意点3:一旦调用了resolve那么返回的promise就是成功,反之亦然就是失败
        //采用捕获的方式,去查看是否抛出异常
        try {
          const result = callback(that.data); //成功就调用onFulfilled函数( 捕获传递进来的,返回一个promise
          if (result instanceof Promise) { //03:如果回调函数返回的是promise对象,那么return的结果就是这个promise的结果
            //因为result这这边是promise对象,采用promise.then的方法指定成功的回调还有失败的回调!
            result.then(
              value => {
                resolve(value); //当result成功,让return的promise也成功,这就需要调用resolve并且指定成功;
              },
              reason => {
                reject(reason); //当result失败,让return的promise也失败,这就需要调用resolve并且指定失败;
              }
            )
          } else { //02:如果回调函数返回的不是promise对象,那么return就是成功,其结果就是这个返回值-value
            resolve(result); //值就是捕获到的结果!
          }
        } catch (error) {
          reject(error)
        }
      }

      //02:根据promise的状态来输出结果!
      if (that.status === PENDING) { //当前promise的状态为pending时候,将回调函数数据保存起来!
        that.callbacks.push({
          onFulfilled(value) { //这边是在上面的callbacksObj.onFulfilled(value) 调用该函数的
            handle(onFulfilled);
          },
          onRejected(reason) { //这边是在上面的callbacksObj.onRejected(reason) 调用该函数的
            handle(onRejected);
          }
        })
      } else if (that.status === RESOLVED) { //如果为resolve成功,那么便调用成功的回调函数(异步任务哦,需要定时器),
        // 异步执行onFulfilled并且改变return的promise的状态(这是在handle封装函数内部改的)
        setTimeout(() => {
          handle(onFulfilled);
        })
      } else { //如果是rejected状态的,失败就需要调用失败的回调函数onRejected(),异步执行onRejected(),并且改变return的promise的状态
        setTimeout(() => {
          handle(onRejected);
        })
      }
    })

  }

(4):Promise原型对象的catch()的定义

  /*Promise原型对象的catch()
  指定失败的回调函数,并且返回一个新的promise对象
   */
  Promise.prototype.catch = function (onRejected) {
    return this.then(undefined, onRejected);
    //前面undefined是为了往后面传递value,而onRejected直接异常穿透下去
    
    //这是在上面的定义的来处理的
    //onFulfilled = typeof onFulfilled === "function" ? onFulfilled : value => value; //向后面传递value
    //onRejected = typeof onRejected === 'function' ? onRejected : reason => {
     // throw reason; //指定默认的失败回调,并且将异常穿透下去(向后面传递失败的reason)
    }
  }

(5):Promise函数对象的resolve方法和reject方法的定义

  /*Promise函数对象的resolve方法 
  返回一个指定结果成功值为value的promise
  */
  Promise.resolve = function (value) {
    //返回的新的promise,但是指定结果可能成功或者失败
    return new Promise((resolve, reject) => {
      if (value instanceof Promise) { //是promise对象,那么其value的结果作为新的promise对象的结果,
        value.then(resolve, reject)
      } else { //不是promise对象,状态变为resolve,那么其数据就是value
        resolve(value);
      }
    })
  }

  /*Promise函数对象的reject方法
  返回的是一个指定结果失败值为reason的promise
   */
  Promise.reject = function (reason) {
    //返回一个新的promise对象,并且指定失败的结果
    return new Promise((resolve, reject) => {
      reject(reason)
    })
  }

(6):Promise函数对象的all方法

all方法里面参数是promise对象组成的数组!
返回的是一个新的promise,只有数组中的promise都成功的时候才成功,否则有一个失败,就失败!

Promise.all = function (Promises) {
    let resolveCount = 0; //定义一个计数器,用来保存promise成功的次数
    const values = new Array(Promises.length); //这个数组是用来保存所有成功的promise对象组成的数组 创建数组并且指定长度
    return new Promise((resolve, reject) => {
      //遍历取出promised数组中的每一个promise对象
      Promises.forEach((p, index) => {
        //注意点:考虑到参数可能不是promise对象,隐藏把这个p外面套一个promise.resolve,反正这个返回的是一个promise结果,直接调用.then也可以
        Promise.resolve(p).then(
          value => {
            resolveCount++; //一进入这里(代表成功),就++
            //p成功了,那么将成功的value保存在values数组里面
            // values.push(value);//不能直接push,因为为了使得promise对象的顺序照旧
            values[index] = value; //就是遍历每一个元素,存储对应的下标进入数组values
            //如果全部成功了,将return的promise改变为成功
            if (resolveCount === Promises.length) {
              resolve(values);
            }
          },
          reason => { //只要有一个失败,return的promise就是失败
            reject(reason)
          }
        )
      })
    })
  }

(7):Promise函数对象的race方法

race方法里面参数是promise对象组成的数组!
返回的是一个promise,其结果有数组中的promise对象,结果由先最先完成的promise决定!

  Promise.race = function (Promises) {
    return new Promise((resolve, reject) => {
      Promises.forEach((p, index) => {
        Promise.resolve(p).then(
          value => { //一旦成功了,那么成功的promise对象的值,就return成功,并且把成功的值为value
            resolve(value);
          },
          reason => { //一旦失败了,那么失败的promise对象的值,就return失败,并且把失败的值为reason
            reject(reason);
          }
        )
      })
    })
  }

(8):在promise.js里面自定义自己的方法

01:Promise.resolveDelay 返回一个promise对象,在指定时间后才确定结果(可能成功或失败)
02:Promise.rejectDelay 返回一个promise对象,在指定时间后才确定失败

/*01:Promise.resolveDelay 返回一个promise对象,在指定时间后才确定结果(可能成功或失败) */
  Promise.resolveDelay = function (value, time) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (value instanceof Promise) { //value就是这个返回的结果,可能是promise对象,可能不是
          value.then(resolve, reject)
          // value.then(
          //   value => {
          //     resolve(value)
          //   },
          //   reason => {
          //     reject(reason)
          //   }
          // )
        } else {
          resolve(value)
        }
      })
    }, time)
  }

  /*02:Promise.rejectDelay 返回一个promise对象,在指定时间后才确定失败 */
  Promise.rejectDelay = function (reason, time) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        reject(reason);
      }, time)
    })
  }

四:手写一个promise方法的完整代码如下

/*
自定义Promise函数模块
 */
(function (window) {
  const PENDING = "peding";
  const RESOLVED = "resolve";
  const REJECTED = "reject";

  // Promise构造函数  executor:执行器函数
  function Promise(executor) {

    const that = this; //把that指向promise的that存再一个变量中,需要用的时候,就调用!
    that.status = PENDING; //给promise对象指定status属性,初始值为pending
    that.data = undefined; //给promise指定一个存储结果数据的属性
    that.callbacks = []; //定义一个回调函数里面存放着可能待执行的函数,每一个元素的结构:{onFulfilled(){},onRejected(){}}

    function resolve(value) {
      //04:需要先判断 当前状态是否是pending,如果不是直接结束掉
      if (that.status != PENDING) {
        return
      }

      //01:将状态改为resolved
      that.status = RESOLVED
      //保存value数据
      that.data = value;

      //02:如果有待执行callback函数,立即异步执行回调函数onFulfilled()(丢到任务队列中)
      if (that.callbacks.length > 0) {
        setTimeout(() => { //03:放入队列中,执行所有成功的回调
          that.callbacks.forEach(callbacksObj => { //遍历出回调函数数组中是否有成功的回调函数
            callbacksObj.onFulfilled(value); //给成功的回调函数指定成功的结果!
          });
        })
      }
    }

    function reject(reason) {
      //需要先判断 当前状态是否是pending,如果不是直接结束掉 
      // 因为状态只能改变一次!,一进来就是reject就执行,若是pending就直接结束掉!
      if (that.status != PENDING) {
        return
      }
      that.status = REJECTED
      that.data = reason;
      if (that.callbacks.length > 0) {
        setTimeout(() => {
          that.callbacks.forEach(callbacksObj => {
            callbacksObj.onRejected(reason)
          })
        }, 1000)
      }

    }
    //因为使用的时候,在executor执行器函数里面传入了两个回调函数,需要在这边定义一下!
    //立即同步执行exxcutor 
    try {
      executor(resolve, reject);
    } catch (error) { //然后执行器抛出异常,那么就调用reject失败函数
      reject(error)
    }
  }

  /*Promise原型对象的then() 
  返回一个新的promise对象,并且指定成功和失败的回调函数,
  */
  Promise.prototype.then = function (onFulfilled, onRejected) { //onFulfilled形式参数,接受外面的成功的回调,然后指向resolve

    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : value => value; //向后面传递value
    onRejected = typeof onRejected === 'function' ? onRejected : reason => {
      throw reason; //指定默认的失败回调,并且将异常穿透下去(向后面传递失败的reason)
    }
    const that = this;

    // 01:返回一个新的promise对象
    return new Promise((resolve, reject) => { //根据里面的状态执行结果,来判断是应该调用成功的回调还是失败的回调
      /*
        调用指定的回调函数处理,根据执行的结果,改变return的promise状态
       */
      function handle(callback) { //handle---处理
        /*
          01:如果抛出异常,return的promise就会失败,其reason就是error
          02:如果回调函数返回的不是promise对象,那么return就是成功,其结果就是这个返回值-value
          03:如果回调函数返回的是promise对象(而promise的结果在.then输出,于是需要借用.then方法),
              那么return的结果就是这个promise的结果(是成功就成功,是失败就失败)
         */
        //注意点1:新的promise的结果,由onFulfilled或onRejected来决定的!
        //注意点2:onFulfilled函数或onRejected函数执行后,根据结果来调用resolve还是reject
        //注意点3:一旦调用了resolve那么返回的promise就是成功,反之亦然就是失败
        //采用捕获的方式,去查看是否抛出异常
        try {
          const result = callback(that.data); //成功就调用onFulfilled函数( 捕获传递进来的,返回一个promise
          if (result instanceof Promise) { //03:如果回调函数返回的是promise对象,那么return的结果就是这个promise的结果
            //因为result这这边是promise对象,采用promise.then的方法指定成功的回调还有失败的回调!
            result.then(
              value => {
                resolve(value); //当result成功,让return的promise也成功,这就需要调用resolve并且指定成功;
              },
              reason => {
                reject(reason); //当result失败,让return的promise也失败,这就需要调用resolve并且指定失败;
              }
            )
          } else { //02:如果回调函数返回的不是promise对象,那么return就是成功,其结果就是这个返回值-value
            resolve(result); //值就是捕获到的结果!
          }
        } catch (error) {
          reject(error)
        }
      }

      //02:根据promise的状态来输出结果!
      if (that.status === PENDING) { //当前promise的状态为pending时候,将回调函数数据保存起来!
        that.callbacks.push({
          onFulfilled(value) { //这边是在上面的callbacksObj.onFulfilled(value) 调用该函数的
            handle(onFulfilled);
          },
          onRejected(reason) { //这边是在上面的callbacksObj.onRejected(reason) 调用该函数的
            handle(onRejected);
          }
        })
      } else if (that.status === RESOLVED) { //如果为resolve成功,那么便调用成功的回调函数(异步任务哦,需要定时器),
        // 异步执行onFulfilled并且改变return的promise的状态(这是在handle封装函数内部改的)
        setTimeout(() => {
          handle(onFulfilled);
        })
      } else { //如果是rejected状态的,失败就需要调用失败的回调函数onRejected(),异步执行onRejected(),并且改变return的promise的状态
        setTimeout(() => {
          handle(onRejected);
        })
      }
    })

  }

  /*Promise原型对象的catch()
  指定失败的回调函数,并且返回一个新的promise对象
   */
  Promise.prototype.catch = function (onRejected) {
    return this.then(undefined, onRejected);
    //前面undefined是为了往后面传递value,而onRejected直接异常穿透下去
  }

  /*Promise函数对象的resolve方法 
  返回一个指定结果成功值为value的promise
  */
  Promise.resolve = function (value) {
    //返回的新的promise,但是指定结果可能成功或者失败
    return new Promise((resolve, reject) => {
      if (value instanceof Promise) { //是promise对象,那么其value的结果作为新的promise对象的结果,
        value.then(resolve, reject)
      } else { //不是promise对象,状态变为resolve,那么其数据就是value
        resolve(value);
      }
    })
  }

  /*Promise函数对象的reject方法
  返回的是一个指定结果失败值为reason的promise
   */
  Promise.reject = function (reason) {
    //返回一个新的promise对象,并且指定失败的结果
    return new Promise((resolve, reject) => {
      reject(reason)
    })
  }

  /*Promise函数对象的all方法   all方法里面参数是promise对象组成的数组!
  返回的是一个promise,只有数组中的promise都成功的时候才成功,否则有一个失败,就失败!
  */
  Promise.all = function (Promises) {
    let resolveCount = 0; //定义一个计数器,用来保存promise成功的次数
    const values = new Array(Promises.length); //这个数组是用来保存所有成功的promise对象组成的数组 创建数组并且指定长度
    return new Promise((resolve, reject) => {
      //遍历取出promised数组中的每一个promise对象
      Promises.forEach((p, index) => {
        //注意点:考虑到参数可能不是promise对象,隐藏把这个p外面套一个promise.resolve,反正这个返回的是一个promise结果,直接调用.then也可以
        Promise.resolve(p).then(
          value => {
            resolveCount++; //一进入这里(代表成功),就++
            //p成功了,那么将成功的value保存在values数组里面
            // values.push(value);//不能直接push,因为为了使得promise对象的顺序照旧
            values[index] = value; //就是遍历每一个元素,存储对应的下标进入数组values
            //如果全部成功了,将return的promise改变为成功
            if (resolveCount === Promises.length) {
              resolve(values);
            }
          },
          reason => { //只要有一个失败,return的promise就是失败
            reject(reason)
          }
        )
      })
    })
  }

  /*Promise函数对象的race方法   race方法里面参数是promise对象组成的数组!
  返回的是一个promise,其结果有数组中的promise对象,先完成的promise决定!
  */
  Promise.race = function (Promises) {
    return new Promise((resolve, reject) => {
      Promises.forEach((p, index) => {
        Promise.resolve(p).then(
          value => { //一旦成功了,那么成功的promise对象的值,就return成功,并且把成功的值为value
            resolve(value);
          },
          reason => { //一旦失败了,那么失败的promise对象的值,就return失败,并且把失败的值为reason
            reject(reason);
          }
        )
      })
    })
  }

  /*
    在promise.js里面自定义自己的方法:
   */

  /*01:Promise.resolveDelay 返回一个promise对象,在指定时间后才确定结果(可能成功或失败) */
  Promise.resolveDelay = function (value, time) {

    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (value instanceof Promise) { //value就是这个返回的结果,可能是promise对象,可能不是
          value.then(resolve, reject)
          // value.then(
          //   value => {
          //     resolve(value)
          //   },
          //   reason => {
          //     reject(reason)
          //   }
          // )
        } else {
          resolve(value)
        }
      })
    }, time)
  }

  /*02:Promise.rejectDelay 返回一个promise对象,在指定时间后才确定失败 */
  Promise.rejectDelay = function (reason, time) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        reject(reason);
      }, time)
    })
  }


  //向外暴露Promise函数
  window.Promise = Promise
})(window)

/*
  在promise方法里面自定义自己的方法:
 */

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->