Promise

1、案例

Promise用于对异步操作的进行数据处理,为异步操作的回调函数提供接口,让其在可同步执行,而不用再将回调函数进行层层嵌套。
例如,我们以下面的例子为例:




    
    Index


    

对于异步函数,如果不进行回调函数嵌套,我们就无法保证其执行顺序。但是有了Promise对象之后,我们可以进行链式书写,从而保证回调执行的顺序。




    
    Index


    

2、Promise的基本语法

Promise对象是一个代理对象(代理一个值),被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法(handlers)。 这让异步方法可以像同步方法那样返回值,但并不是立即返回最终执行结果,而是一个能代表未来出现的结果的promise对象。

根据以上描述,我们可以知道,Promise对象可以代理一个异步处理的结果。所以Promise有fulfilled(已成功)状态和rejected(已失败)两个状态,对应Promise构造函数的两个回调函数:resolvereject

new Promise( function(resolve, reject) {...} /* executor */  );

在执行回调函数之前,Promise的状态为pedding,当执行resolve后状态变为fulfilled,执行reject之后装态变为rejected

原型方法:

//添加一个拒绝(rejection) 回调到当前 promise, 返回一个新的promise。
Promise.prototype.catch(onRejected)

//添加一个拒绝(rejection) 回调到当前 promise, 返回一个新的promise。当这个回调函数被调用,新 promise 将以它的返回值来resolve,否则如果当前promise 进入fulfilled状态,则以当前promise的完成结果作为新promise的完成结果.
Promise.prototype.then(onFulfilled, onRejected)

//无论当前promise的状态是完成(fulfilled)还是失败(rejected),都会执行
Promise.prototype.finally(onFinally)

3、Jquery中的deferred对象

Jquery中的deferred对象是原生Promise接口的实现。用法大同小异。

ajax中我们可以直接使用,因为1.5版本之后,ajax返回的值就是一个defeered对象。

旧的写法:

  $.ajax({
    url: "test.html",
    success: function(){
      alert("成功了!");
    },
    error:function(){
      alert("出错啦!");
    }
  });

新的写法:

//更简洁的链式写法
$.ajax("test.html")
  .done(function(){ alert("成功了!"); })
  .fail(function(){ alert("出错啦!"); });

而且deferred对象不仅仅是在ajax中使用,也可以在任何回调中进行使用。

比如:

var $dfd = $.Deferred();//创建一个deferred实例对象
var success = 0;//模拟成功失败状态
window.setTimeout(() => {
    if(success === 0){
        $dfd.resolve();
    }else{
         $dfd.reject();
    }
}, 100);
//两种写法:
$dfd.done(function(){
    alert('成功');
}).fail(function(){
    alert('失败');
});
//------另一种写法
$dfd.then(function(){
     alert('成功');
},function(){
     alert('失败');
});

同样的道理,使用deferred对象重写书写上面的案例:


    
    Index
    


    

另外:jquery还提供了一个同时监听多个回调的方法。$.when(),返回值为defferred对象。

$.when()接受多个deferred对象作为参数,当它们全部运行成功后,才调用resolved状态的回调函数,但只要其中有一个失败,就调用rejected状态的回调函数。它相当于将多个非同步操作,合并成一个。实质上,when方法为多个deferred对象,返回一个单一的promise对象。

$.when(
    $.ajax( "/main.php" ),
    $.ajax( "/modules.php" ),
    $.ajax( "/lists.php" )
).then(successFunc, failureFunc);
参考来源:

https://wangdoc.com/javascript/async/promise.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises
http://javascript.ruanyifeng.com/jquery/deferred.html#toc0

你可能感兴趣的:(Promise)