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

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

所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。 这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。 为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。 "同步模式"就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的； "异步模式"则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。 通常，我们执行异步的方法是通过回调函数，如： [javascript]  view plain  copy   function f1(){       setTimeout(function () {           //doSomething           setTimeout(function () {               //doSomething               setTimeout(function () {                   //doSomething               },300)           },200)       },100)   }   这样书写固然简单，但是问题也来了，金字塔类型的接口不利于代码阅读与维护，如果，代码写成这样，会不会更利于阅读维护呢？ [javascript]  view plain  copy   f1       .then(function () {          })       .then(function () {          })       .then(function () {          });   即将原来的回调金字塔式改写成链式，这样我们就可以很清楚的看清楚每个方法执行的是什么了。 因此CommonJS提出一种Promise规范，目的是为了异步编程提供统一的接口

Jquery中的promise

在jquery1.5版本后，引入了promise对象，实现了基本的promise,如果你在jquery1.5以上版本，可以发现 原来的ajax方法还可以这样用 [javascript]  view plain  copy   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对象可以完成链式异步调用， 因此，我们可以将这样的形式 [javascript]  view plain  copy   function wait(resolve){       var a=1;       resolve(a);   }      wait(function (data) {       alert(data)   });   改写成 [javascript]  view plain  copy   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对象 [javascript]  view plain  copy   $.when(wait())           .then(function (data) {               alert(data);               return data+1;           })           .then(function (data) {               alert(data);           });  

angular中的promise

同上，在angular中，我们也支持promise异步方法，他使用了一个内置对象$q 具体使用代码如下： [javascript]  view plain  copy   <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()还是有一些区别的，如下 [javascript]  view plain  copy   <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。本文只记录了最简单的形式，如果有什么问题，望指正，谢谢。

推荐阅读 

JavaScript Promise 探微