js,jquery then,angular.js $q 异步编程

我们知道,JavaScript语言的执行环境是单线程的。

所谓”单线程”，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。

这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。
为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。
“同步模式”就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；
“异步模式”则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。
通常，我们执行异步的方法是通过回调函数，如：

function f1(){      setTimeout(function () {          //doSomething          setTimeout(function () {              //doSomething              setTimeout(function () {                  //doSomething              },300)          },200)      },100)  }  

这样书写固然简单，但是问题也来了，金字塔类型的接口不利于代码阅读与维护，如果，代码写成这样，会不会更利于阅读维护呢？

f1      .then(function () {      })      .then(function () {      })      .then(function () {      });  

即将原来的回调金字塔式改写成链式，这样我们就可以很清楚的看清楚每个方法执行的是什么了。

因此CommonJS提出一种Promise规范，目的是为了异步编程提供统一的接口

Jquery中的promise
在jquery1.5版本后，引入了promise对象，实现了基本的promise,如果你在jquery1.5以上版本，可以发现 原来的ajax方法还可以这样用

var jqxhr = $.ajax( "example.php" )      .done(function() {          alert( "success" );      })      .fail(function() {          alert( "error" );      })      .always(function() {          alert( "complete" );      });  

将原来嵌入内部的success,error方法变为链式调用，这是因为在1.5版本，ajax方法进行了封装，.ajax()获得的是一个.Deferred对象。
因此，我们可以知道Deferred对象可以完成链式异步调用，

因此，我们可以将这样的形式

function wait(resolve){      var a=1;      resolve(a);  }  wait(function (data) {      alert(data)  });  

改写成

function wait() {         var def = $.Deferred();           //获取deferred对象         def.resolve(1); // 改变Deferred对象的执行状态    ，resolve为成功状态 //当收到resolve时，变执行then方法         setTimeout(tasks, 1000);         return def.promise();     }     $.when(wait())             .then(function (data) {                 alert(data);   //1  该值有resolve(1) 中的1得来             })  

有时候，我们需要不止一部，可能需要多个步骤，那么只需要 在前一个then的回调中签返回值就可，从这里我们能够看出 .then()方法返回的也是一个deferred.promise对象

$.when(wait())          .then(function (data) {              alert(data);              return data+1;          })          .then(function (data) {              alert(data);          });  

angular中的promise
同上，在angular中，我们也支持promise异步方法，他使用了一个内置对象$q
具体使用代码如下：

<span style="white-space:pre">    </span>var getData = function () {              var defer = $q.defer();       //同jquery $.Deferred              $timeout(function () {                  defer.resolve(1);         //改变成功状态              }, 1000);              return defer.promise;          };          getData()                  .then(function (data) {       //getData执行完成后                      alert(data);                  //1                      return data+1;                               })                  .then(function (data) {                     alert(data);                    //2                  });  

注意，angular还有一个when方法，他和jquery中的$.when()还是有一些区别的，如下

<span style="font-family:Microsoft YaHei;">var def = $q.defer();          var q=$q.when(12);          q.then(function (data) {              alert(data); //12          });</span>  

angular 中q.when()方法是将里面的参数封装成一个q.defer().promise对象，因此 可以通过then方法获取when里面的值
而Jquery中，$.when()接收的是一个deferred对象，不满足promise/A规范。

总结
其实在promise/A规范中还有很多关于promise的定义，如all() 、spread() 、race() 、denodeify() ，如果想了解 promise 的更多功能，我建议诸位看看 Bluebird 函数库的 API。本文只记录了最简单的形式，如果有什么问题，望指正，谢谢。