angular中的异步编程 $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。本文只记录了最简单的形式，如果有什么问题，望指正，谢谢。

推荐阅读 

JavaScript Promise 探微