详解Promise对象

Promise接口

es6将Promise写入语言标准,因此目前js原生支持Promise对象。使用Promise的优点就不赘述了,Promise对象起到一个代理的作用(proxy),它充当异步操作和回调函数之间的中介。它的思想是,每一个异步任务立刻返回一个Promise对象,由于是立即返回,所以和同步流程没有区别。Promise对象使用then方法添加回调函数。then方法可以接受两个回调函数,第一个是异步操作成功时的回调函数,第二个是异步操作失败时的回调函数(可以省略)。一旦状态改变,就调用相应的回调函数。(Promise的构造函数内容下面会细讲)

   new Promise(...).then(
      fn1,
      fn2
   )

上面代码中,Promise对象使用then方法绑定两个回调函数:操作成功时的回调函数fn1,操作失败时的回调函数fn2。这两个函数都接受异步操作传回的值作为参数。如果把这两个函数复杂化一点,伪代码就是这样

   new Promise(...).then(function(value){
      ...    // 逻辑代码
      console.log(value);    
   }, function(error){
      ...    // 逻辑代码
      console.log(error);
   })

接下来我们来看一下Promise的具体应用例子

Promise对象生成

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由js引擎提供,不用自己部署。

   var promise = new Promise(function(resolve, reject){
       //异步操作代码
       if(...){
       //resolve函数有两个作用,第一个是将这个对象的异步操作状态改为成功,第二个是将参数value传入回调函数
           resolve(value);   
       } else {
       //reject函数有两个作用,第一个是将这个对象的异步操作状态改为失败,第二个是将参数error传入回调函数
          reject(error);
       }
   })

这里的value和error,是promise对象传给回调函数的参数,如果成功则传value,失败传error,所以

   var promise = new Promise(function(resolve, reject){
       resolve('success')
   })
   promise.then(function(value){
       console.log(value)   // 'success'
   })

失败的时候

   var promise = new Promise(function(resolve, reject){
       reject('error')
   })
   promise.then(function(value){
       console.log(value)  //不执行,第一个函数是成功的函数
   }, function(error){
       console.log(error)  // 'error'  
   })

当然这里为了方便理解把错误处理函数写在了then中

链式调用

我们要注意,每一次调用then函数之后,返回的还是一个Promise对象

   var promise1 = new Promise(function(resolve, reject){
       resolve('success')   //省略其他逻辑代码
   })
   promise1
      .then(function(value){
          console.log(value)  // 'success'
          return 'success'
      })
      .then(function(value){
          console.log(value)   // 'success'
      })

这里第一个then直接返回success,相当于

   var promise1 = new Promise(function(resolve, reject){
       resolve('success')   //省略其他逻辑代码
   })
   var promise2 = new Promise(function(resolve, reject){
       resolve('success')   //省略其他逻辑代码
   })
   promise1
      .then(function(value){
          console.log(value)  // 'success'
          return promise2;
      })
      .then(function(value){
          console.log(value);   // 'success'
      })

也就是说如果直接在then中return,相当于这个Promise对象的状态改为了已完成,并且把return的值传入了回调函数中。那么如果没有return一个值,那么下一个then函数自然是拿不到的

   promise1
      .then(function(value){
          return;
      })
      .then(function(value){
          console.log(value);   // 'undefined'
      })

那么如果发生了错误呢

   new Promise()
      .then(step1)
      .then(step2)
      .then(step3)
      .then(
        console.log,
        console.error
      );

如果step1出错,返回的Promise对象状态为rejected,接下来的step2就不会再执行了,Promises对象开始寻找,接下来第一个操作失败时的回调函数,于是它找到了console.error,当然推荐的写法是

   promise
      .then(function(data) {
        // success
      })
      .catch(function(err) {
        // error
      });

catch方法可以捕获前面then方法执行中的错误,也更接近同步的写(try/catch) 需要注意的是,catch方法返回的还是一个 Promise 对象,因此后面还可以接着调用then方法。

Promise的一次性

Promise的变化途径只有两种。

  • 异步操作从未完成到已完成
  • 异步操作从未完成到失败
    这种变化只能发生一次,一旦当前状态变为“已完成”或“失败”,就意味着不会再有新的状态变化了,所以在Promise中重复调用resolve和reject没有作用
   var promise = new Promise(function(resolve, reject){
       resolve(...)
       resolve(...)    // 不起作用
   })
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值