Promise的实现原理

1.Promise 介绍

  Promise类似一个事务管理器,将用户异步操作流程用流水的形式来表达,用来延迟deferred和异步asynchronous. 特点如下:

 (1)对象的状态不受外界影响

    Promise对象有三种状态

    Pending     进行中

    Resolved   完成状态

    Rejected    失败状态

  只有异步操作的结果,可以决定当前是哪种状态,任何其他操作都无法改变这种状态

 (2)一旦状态改变,就不会再变,任何时候都可以得到这个结果

   状态改变: Pending—> Resolved  /  Pending —> Rejected

   事件的执行一旦错误,再去监听是得不到结果的。

   (3)Promise 对象有两个重要方法,一个是then, 另一个是resolve

  then: 将事务流添加到事务队列中

  resolve:开启流程,让真个流程从第一个事务开始执行

  (4)Promise的常用方式如下:  

var p = new Promise(function(resolve, reject){

    …

    //处理事务

    resolve()

    ….

});

p.then(function(value){

    //处理成功

}, function(reason){

    //失败处理

}).always(function(){

    //总是会执行
});

 

 当前Promise是ES6的一个重要特性,JQuery1.8以后也实现了Promise对象.

2.ES6的Promise

function helloWorld(flag){
  return new Promise(function(resolve,reject){
        if(flag){
            resolve("Hello World!")
        }else{
            reject("Error")
        }  
    });  
}  

//helloWord方法返回一个new的Promise对象,Promise回调有两个参数分别处理成功和失败,不想处理的直接传入null即可

helloWorld(true).then(function(message){},function(error){}); 
helloWorld(true).then(function(message){}); //不处理失败

  每一个then 执行后,又返回一个Promise对象

  Promise.all 可以接收一个元素为 Promise 对象的数组作为参数,当这个数组里面所有的 Promise 对象都变为 resolve 时,该方法才会返回。结果为Promise对象结果集合。

Promise.all([promise1, promise2]).then(function (result) {

      console.log(result); // [“promise1Result”, “promise2result”]

}); 

  不管promise1执行快还是promise2执行快,promise.all会按照数组的吮吸返回结果。

  日常开发中经常会遇到这样的需求,在不同的接口请求数据然后拼合成自己所需的数据,通常这些接口之间没有关联(例如不需要前一个接口的数据作为后一个接口的参数),

这个时候 Promise.all 方法就可以派上用场了。

3.JQuery中的Promise实现:

  在jquery1.5之前传统的写法是

$.ajax({

   url:’/ServerResource.txt’,

   success: handlerSuccess function,

   error: handlerError function

});

//$.ajax返回一个XHR(XMLHttpRequest)对象,不能进行链式操作

  在jquery1.5之后,$.ajax 会返回$.Deferred对象,新的写法:

var promise = $.ajax({
  url: "/ServerResource.txt"
});
 
promise.done(handlerSuccess);
promise.fail(handlerError);
promise.always(alwaysFunction);

  $.ajax() 会返回一个$.Deferred对象,执行完done, fail, always会返回一个新的$.Deferred对象,可以进行链式操作

  promise.done(handlerSuccess).fail(handlerError).always(alwaysFunction)

  $.Deferred对象的好处就是可以任意添加回调函数,就是可以出现多个.done()处理

promise.done(handlerSuccess1).done(handlerSuccess2).fail(handlerError).always(alwaysFunction) 

  另外一种产生链式调用的方式是利用Promise的 then 方法,它接受三个event handlers作为参数,

  在jquery 1.8之前,对于多个回调函数,有需要以数组方式传入三个参数:  

$.ajax({url: "/ServerResource.txt"})
.then([successFunction1, successFunction2, successFunction3], 
    [errorFunction1, errorFunction2]);
 
//same as
 
var jqxhr = $.ajax({
  url: "/ServerResource.txt"
});
 
jqxhr.done(successFunction1);
jqxhr.done(successFunction2);
jqxhr.done(successFunction3);
jqxhr.fail(errorFunction1);
jqxhr.fail(errorFunction2); 

  1.8版本之后,then会返回一个新的Promise,它可以通过一个函数过滤掉Deferred对象的状态和值,用于取代不被推荐使用的 defeered.pipe() 方法。

 $.ajax() 返回Promise对象,处理方式和ES6一致。

var promise = $.ajax({
  url: "/ServerResource.txt"
});
 
promise.then(successFunction, errorFunction);
 
//如果不想处理某个事件类型,可以传入Null
var promise = $.ajax({
  url: "/ServerResource.txt"
});
 
promise.then(successFunction); //no handler for the fail() event
then()方法还能逐次调用多个方法,可以用于处理有着先后顺序或者依赖的多个Ajax请求:

var promise = $.ajax("/myServerScript1");
 
function getStuff() {
    return $.ajax("/myServerScript2");
}
 
promise.then(getStuff).then(function(myServerScript2Data){  //第一个AJAX的response 作为第二个AJAX的入参
  // Do something 
});

 

posted on 2017-03-14 13:56  清水伊梦  阅读(733)  评论(0编辑  收藏  举报