Deferred 和 Promises 实例详解

最近在网上找了很多关于jquery的Deferred介绍的文章，唯独觉得这篇外文博文介绍的比较详细，现翻译出来：

原文：Deferreds and Promises in JavaScript(http://flaviocopes.com/deferred-and-promises-in-javascript/)

Promises是一种实现javascript异步调用的新方式，它对于结构化你的javascript代码非常有帮助。

一个Promise代表了一个事件对象，在这个对象的整个生命周期中，它从刚开始调用时的挂起状态，到完成调用的解决或拒绝状态，或者它一直处于挂起状态而永远也不被解决。

它是javascript事件的一种新方式，我认为它有助于改善代码的可读性而且你不会觉得很怪异。到目前为止，有两种不同实现Promise的方式，一种是按照Promises/A Spec实现的各种库，另一种就是jQuery。

由于jQuery类库比较常用，因此接下来我将主要用jQuery的实现来讨论它，如果你不想使用其他的库，你也可以使用它。

一、 jQuery promise 介绍：

让我首先介绍下Deferred的概念，首先，Deferred是一个Promise，另外你可以触发一个Deferred（resolve或reject），相反，Promise对象你只能给它添加回调函数，它被其他对象触发。

一个Promise对象，就是一个只读的Deferred对象。

 

一个简单的例子是下面这个函数：

var promise = $("div.alert").fadeIn().Promise();

你现在可以添加done()和fail()来处理回调。

这只是一个调用的例子，在jQuery1.8中，动态的promises变成了实时处理，并且附带了一个progress的回调函数。

另一个promise的例子是ajax调用：

var promise = $.get(url); 
promise.done(function(data) {});

一个deferred对象是你创建的，并且设置了回调函数，并解决的promise，如：

var deferred = new $.Deferred(); 
deferred.done(function(data) { console.log(data) });
deferred.resolve('some data');

deferred对象的状态可以使用resolve() 和 reject()触发，一旦一个deferred对象的状态变成了最终的状态（resolved/rejected），它就再也不能被改变了如：

var deferred = new $.Deferred();
deferred.state();  // "pending"
deferred.resolve();
deferred.state();  // "resolved"

我们可以添加一下这些回调到一个promise对象上：

.done()  //当promise执行成功时被调用
.fail()  //当promise失败是被调用
.always()  //不管是成功和失败状态，最终都会被调用

这些回调函数，可以使用then() , 一起调用：

promise.then(doneFunc , failFunc , alwaysFunc);

上面只是一个简单的介绍jquery对promises和deferred的实现，下面会用几个实例深入讲解：

二、一些jQuery的Deferred实例

比如，下面执行一个函数，当它执行完后调用dfd.resolve()，就像执行了一个回调函数，但代码更加结构化和复用性。

$.when(execution()).then(executionDone); 
 
function execution(data) {
  var dfd = $.Deferred();
  console.log('start execution');
 
  //in the real world, this would probably make an AJAX call.
  setTimeout(function() { dfd.resolve() }, 2000);    
 
  return dfd.promise();
}
 
function executionDone(){
  console.log('execution ended');
}

实例二：

下面是一个被处理的数组元素，一旦所有的元素都处理完，就调用另外一个函数，让我们来看看使用Deferred的真正好处，$.when.apply()方法用于将所有的dfd.resolve()组织在一起。

var data = [1,2,3,4]; // the ids coming back from serviceA
var processItemsDeferred = [];
 
for(var i = 0; i < data.length; i++){
  processItemsDeferred.push(processItem(data[i]));
}
 
$.when.apply($, processItemsDeferred).then(everythingDone); 
 
function processItem(data) {
  var dfd = $.Deferred();
  console.log('called processItem');
 
  //in the real world, this would probably make an AJAX call.
  setTimeout(function() { dfd.resolve() }, 2000);    
 
  return dfd.promise();
}
 
function everythingDone(){
  console.log('processed all items');
}

实例三：

一个稍微更复杂点的例子，在这里数组里的元素从其他地方获取，使用var fetchItemIdsDeferred = fetchItemIds(data) and fetchItemIdsDeferred.done()

var data = []; // the ids coming back from serviceA
var fetchItemIdsDeferred = fetchItemIds(data); // has to add the ids to data
 
function fetchItemIds(data){
  var dfd = $.Deferred();
  console.log('calling fetchItemIds');
 
  data.push(1);
  data.push(2);
  data.push(3);
  data.push(4);        
 
  setTimeout(function() { dfd.resolve() }, 1000);
  return dfd.promise();
}
 
fetchItemIdsDeferred.done(function() { // if fetchItemIds successful...
  var processItemsDeferred = [];
 
  for(var i = 0; i < data.length; i++){
    processItemsDeferred.push(processItem(data[i]));
  }
 
  $.when.apply($, processItemsDeferred).then(everythingDone); 
});
  
 
function processItem(data) {
  var dfd = $.Deferred();
  console.log('called processItem');
 
  //in the real world, this would probably make an AJAX call.
  setTimeout(function() { dfd.resolve() }, 2000);    
 
  return dfd.promise();
}
 
function everythingDone(){
  console.log('processed all items');
}

实例四：

下面是两个我实例，在不用Defrred的情况下，这个程序周期性做同一件事，并等待处理结束后执行其他事情。

常用的做法如下：

var allProcessed = false;
var countProcessed = 0;
for (var i = 0, len = theArray.length; i < len; i++) {
  (function(i) {
    // do things with i
        if (++countProcessed === len) allProcessed = true;
  })(i);
}

另外一个例子：

var interval = setInterval(function() {
  if (App.value) {
    clearInterval(interval);        
    // do things
  }
}, 100);

这是一种结构，代码周期性的判断一个条件是否为true，如果是，则clear interval，并且执行里面的代码。

下面是使用Deferred处理上述情况：

var DeferredHelper = {
  objectVariableIsSet: function(object, variableName) {
    var dfd = $.Deferred();
 
    var interval = setInterval(function() {
      if (object[variableName] !== undefined) {
        clearInterval(interval);
        console.log('objectVariableIsSet');
        dfd.resolve()
      }
    }, 10);
 
    return dfd.promise();
  },
 
  arrayContainsElements: function(array) {
    var dfd = $.Deferred();
 
    var interval = setInterval(function() {
      if (array.length > 0) {
        clearInterval(interval);
        console.log('arrayContainsElements');
        dfd.resolve()
      }
    }, 10);
 
    return dfd.promise();
  }
}
 
var executeThis = function() {
  console.log('ok!');
}
 
var object = {};
object.var = undefined;
var array = [];
 
$.when(DeferredHelper.arrayContainsElements(array)).then(executeThis);
$.when(DeferredHelper.objectVariableIsSet(object, 'var')).then(executeThis);
 
setTimeout(function() {
  object.var = 2;
  array.push(2);
  array.push(3);
}, 2000);

上面的例子，实际上集中了以上三个的功能，我首先创建了一个DeferredHelper对象并且他的另外两个方法arrayContainsElements和objectVariableIsSet功能是自解释的。

考虑到初始值传进来不能做

var integerIsGreaterThanZero = function(integer) {
  var dfd = $.Deferred();
 
  var interval = setInterval(function() {
    if (integer > 0) {
      clearInterval(interval);
      dfd.resolve()
    }
  }, 10);
    
  return dfd.promise();
};
 
var variable = 0;
 
$.when(integerIsGreaterThanZero(variable)).then(executeThis);

也不能这样做：

var object = null;
 
var variableIsSet = function(object) {
  var dfd = $.Deferred();
 
  var interval = setInterval(function() {
    if (object !== undefined) {
      clearInterval(interval);
      console.log('variableIsSet');
      dfd.resolve()
    }
  }, 10);
 
  return dfd.promise();
};
 
$.when(variableIsSet(object)).then(executeThis);
 
setTimeout(function() {
  object = {};
}, 2000);

because when doing object = {}, the object reference is changed, and as Javascript actually references variables by copy-reference, the reference of the object variable inside the variableIsSet function is not the same as the outer object variable.

一个在ember.js中的例子：

App.DeferredHelper = {
 
  /**
   * Check if an array has elements on the App global object if object 
   * is not set.
   * If object is set, check on that object.
   */
  arrayContainsElements: function(arrayName, object) {
    var dfd = $.Deferred();
    if (!object) object = App;
 
    var interval = setInterval(function() {
      if (object.get(arrayName).length > 0) {
        clearInterval(interval);
        dfd.resolve()
      }
    }, 50);
 
    return dfd.promise();
  },
 
  /**
   * Check if a variable is set on the App global object if object 
   * is not set.
   * If object is set, check on that object.
   */
  variableIsSet: function(variableName, object) {
    var dfd = $.Deferred();
    if (!object) object = App;
 
    var interval = setInterval(function() {
      if (object.get(variableName) !== undefined) {
        clearInterval(interval);
        dfd.resolve()
      }
    }, 50);
 
    return dfd.promise();
  }
}

因此我在客户端可以使用：

$.when(App.DeferredHelper.arrayContainsElements('itemsController.content'))
 .then(function() {
  //do things
});   

和

$.when(App.DeferredHelper.variableIsSet('aVariable'))
 .then(function() {
  //do things
});
    
//&
 
$.when(App.DeferredHelper.variableIsSet('aVariable', anObject))
 .then(function() {
  //do things
});   

所有这些都使用了jQuery的deferreds 实现。

其他的资源：

http://robdodson.me/blog/2012/06/03/make-your-own-jquery-deferreds-and-promises/
http://msdn.microsoft.com/en-us/magazine/gg723713.aspx

也许你并不想使用jQuery的deferred实现，或者你使用其他的库但没有实现这个功能，你可以使用其他专有的库如Q, rsvp.js, when.js.

让我们看看是哟个when.js的例子：

例如：我有一个元素的ID，我想在终点调用API获取到更多详细信息，一旦ajax调用返回，继续处理：

function processItem(item) {
  var deferred = when.defer();
 
  var request = $.ajax({
    url: '/api/itemDetails',
    type: 'GET'
    data: {
      item: item
    }
  });
 
  request.done(function(response) {
    deferred.resolve(JSON.parse(response)); 
  });
   
  request.fail(function(response) {
    deferred.reject('error');
  });
   
  return deferred.promise;
}
 
var item = {
  id: 1
}
 
processItem(item).then(
  function gotIt(itemDetail) {
    console.log(itemDetail);
  },
  function doh(err) {
    console.error(err);
  }
);

我从服务器获取了一些ID值，使用函数processItem()处理它们，然后一旦处理了所有这些元素，我就做其他事：

function processItems(anArray) {
  var deferreds = [];
 
  for (var i = 0, len = anArray.length; i < len; i++) {
    deferreds.push(processItem(anArray[i].id));
  }
 
  return when.all(deferreds);
}
 
var anArray = [1, 2, 3, 4];
 
processItems(anArray).then(
  function gotEm(itemsArray) {
    console.log(itemsArray);
  },
  function doh(err) {
    console.error(err);
  }
);

when.js库提供了一些工具方法比如when.any()和when.some()，这些让deferred的回调函数运行当1.有一个promise被solved，2.至少有一个特定的promise已经返回了。