美文网首页
Promise的基本应用

Promise的基本应用

作者: 苦瓜_6 | 来源:发表于2018-09-18 23:27 被阅读0次

    Promise 对象是 JavaScript 的异步操作解决方案,为异步操作提供统一接口。
    它起到代理作用(proxy),充当异步操作与回调函数之间的中介,使得异步操作具备同步操作的接口。
    Promise 的设计思想是,所有异步任务都返回一个 Promise 实例。
    Promise 实例有一个then方法,用来指定下一步的回调函数。


    Promise对象的状态

    Promise对象有三个状态
    • pending 进行中
    • fulfilled 成功
    • rejected 失败
    特点
    • 对象的状态不受外界影响
      只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
    • 一旦状态改变,就不会再变,任何时候都可以得到这个结果。

    Promise 对象状态改变只有两种可能:
    pending → fulfilled
    pending → rejected
    一旦改变了,状态就不会发生变化了,这时候称为 resolved(已定型)


    Promise 构造函数

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

    生成一个promise实例:

    let promise = new Promise(function(resolve, reject) {
      // ... some code
      if (/* 异步操作成功 */){
        resolve(value);
      } else {
        reject(error);
      }
    });
    

    resolve 函数在异步操作成功时调用,并将异步操作的结果作为参数传递出去;
    reject 函数在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

    Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。

    promise.then(function(value) {
      // success
    }, function(error) {
      // failure
    });
    

    链式调用

    $.ajax(/*code*/).then(成功函数1 , 失败函数1   )
                    .then(成功函数2,  失败函数1 )
    

    思考:上面代码中的成功函数2在什么情况下会被调用?
    答案是: 只要前面成功函数/失败函数没有报错,都会调用 成功函数2。

    • 前面函数 没有报错 的情况:
    // 先生成一个 promise 对象
    var promise = new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve(1)
      },2000)  
    })
    
    promise
       .then((res)=>{
      console.log('成功函数1执行了')   
    })
       .then(()=>{
      console.log('成功函数2执行了')
    },(err)=>{
       console.log('失败函数2调用了')
    }) //  依次打印出 成功函数1执行了   成功函数2执行了
    
    var promise = new Promise((resolve,reject)=>{
      setTimeout(()=>{
        reject(1)
      },2000)  
    })
    
    promise
    // .catch方法是.then(null, rejection)的别名
       .catch((err)=>{
      console.log('失败函数1执行了') 
    })
       .then(()=>{
      console.log('成功函数2执行了')
    },(err)=>{
       console.log('失败函数2执行了')
    }) //   失败函数1执行了    成功函数2执行了
    

    只要前面的回调函数没有报错,都会调用 成功函数2

    • 前面成功函数报错时,调用失败函数2
    var promise = new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve(1)
      },2000)  
    })
    
    promise
       .then((res)=>{
      throw new Error('成功函数1 报错了') 
    })
       .then(()=>{
      console.log('成功函数2执行了')
    },(err)=>{
       console.log('失败函数2调用了')
    }) // 失败函数2调用了
    

    Promise.prototype.catch()

    Promise.prototype.catch方法是.then(null, rejection)的别名,用于指定发生错误时的回调函数。

    Promise 对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。
    所以可以不在then 里定义reject的回调函数,而用catch代替(推荐)

    // 一个不太严谨的例子,用随机数是否大于0.5 来模拟成功和失败.....
    let promise = new Promise(function(resolve,reject) { 
      let rand = Math.random();
      let success = rand>0.5 ;
      console.log(success);
      if(success) {
        resolve(rand)
      } else {
        reject(rand)
      }
    });
    
    promise
      .then(res=> console.log(res) )
      .catch(error => console.log(error))
    

    另外,Promise 内部的错误不会影响到 Promise 外部的代码。


    Promise.prototype.finally()

    finally方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。该方法是 ES2018 引入标准的。


    Promise.all()

    Promise.all方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。

    var p = Promise.all([p1, p2, p3]);
    
    • 只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数
    • 只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数
    • 作为参数的 Promise 实例,自己定义了catch方法,那么它一旦被rejected,并不会触发Promise.all()的catch方法

    参考/收藏:

    相关文章

      网友评论

          本文标题:Promise的基本应用

          本文链接:https://www.haomeiwen.com/subject/doiieftx.html