一般在WEB開發時總會涉及到從伺服器呼叫介面的操作，為了不影響使用者操作，一般會使用非同步方式執行，從而不阻塞使用者的介面操作。而一些常用的呼叫服務會封裝成獨立模組供使用。這時候就會遇到一些問題。比如：若所有服務內的方法都是非同步方式的，則如何在外部控制兩個非同步任務的順序？如何較為統一地處理超時以及執行異常的狀況？…等等
直到後來看到了$q…

非同步操作

非同步操作有一般使用 jQuery的ajax，本文結合AngularJs，因此也順帶引入Angular的$http服務。

ajax

ajax的常用寫法如下:

$.ajax({
    type:'post',//or 'get'
 

    url:'api/foo',
    data:{'a':'v'},
    async:true, //or false
    success:function(response){
        parseResponse(response);
    },
    error:function(err){
        handleError(err);
    }
})

在上述場景中async 決定了ajax是否阻塞介面程序。若asycn=false，則在請求過程中使用者介面無響應，反之無影響。
需要強調的是：若在async=true情況下更新Angular的$scope中的資料，應該呼叫$scope.$apply()

$http

基本使用

angular中的$http預設均為非同步執行，同時與$scope的重新整理不衝突。常用方式如下:

/**
 * @param method:post,get.....
 * @param url:api REST路徑
 * @param data:封裝在request請求中的引數
 * @param param:寫在url路徑後面的引數'?param=v&param2=v2...'
 * @param timeout:超時時間 
 */
$http({method:'POST', url:url, data:data, param:param,
timeout:5000
 
})
.success(function(response){
    parseResponse(response);
})
.error(function(err,stat){
    handleErr(err);
});

[附]post的問題

若直接使用AngularJs 的 $http post請求在SpringMVC中通過@RequestParams是拿不到值的。
參考angular的post請求，SpringMVC後臺接收不到引數值的解決方案將postType從application/json改成application/x-www-form-urlencoded即可。
在angular模組中進行配置，如下：

app.config(function($httpProvider) {
    $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded';
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

    // Override $http service's default transformRequest
    $httpProvider.defaults.transformRequest = [function(data) {
        /**
         * The workhorse; converts an object to x-www-form-urlencoded serialization.
         * @param {Object} obj
         * @return {String}
         */
        var param = function(obj) {
            var query = '';
            var name, value, fullSubName, subName, subValue, innerObj, i;

            for (name in obj) {
                value = obj[name];

                if (value instanceof Array) {
                    for (i = 0; i < value.length; ++i) {
                        subValue = value[i];
                        fullSubName = name + '[' + i + ']';
                        innerObj = {};
                        innerObj[fullSubName] = subValue;
                        query += param(innerObj) + '&';
                    }
                } else if (value instanceof Object) {
                    for (subName in value) {
                        subValue = value[subName];
                        fullSubName = name + '[' + subName + ']';
                        innerObj = {};
                        innerObj[fullSubName] = subValue;
                        query += param(innerObj) + '&';
                    }
                } else if (value !== undefined && value !== null) {
                    query += encodeURIComponent(name) + '='
                            + encodeURIComponent(value) + '&';
                }
            }

            return query.length ? query.substr(0, query.length - 1) : query;
        };

        return angular.isObject(data) && String(data) !== '[object File]'
                ? param(data)
                : data;
    }];
});

直接非同步遇到的問題

如果有一個需求需要先獲取使用者資訊(如getUser())，之後獲取使用者許可權(如getPermission())。假設兩個方法都是非同步的，那在直接呼叫的時候：

getUser();
getPermission();

這樣有可能出現在得到使用者資訊前就呼叫getPermission()方法，這樣邏輯就有問題就出錯。但是如果必須要在獲得使用者資訊後申請許可權，則要麼把getUser()取消非同步，這樣會影響介面響應。要麼：

function getUser(getPermission){
    $.ajax({
        ...
        .success(function(user){
            getPermission(user);
        })
    })
}

這樣一層一層巢狀兩個函式還好，如果在多了foo(), bar()。。。那程式碼就很難看了。

承諾與延遲

$q的基本使用

$q主要是在$http的外圍包上一個q承諾(promise)，同時把$http結果用q.promise處理，然後直接返回q.promise就好了。

var defered= $q.defer();
$http({method:'POST', url:'api/url', data:{data}, timeout:5000})
.success(function(response){
    defered.resolve(response);
})
.error(function(err,status){
    if(status === 405){
        defered.reject('internal error');
    } else if(status === -1){
        defered.reject('timeout');
    } else {
        defered.reject('other error');
    }
});
return defered.promise;

呼叫時候，直接promise.then()如下：

service.getPromise().then(
    function(result){
        //resolve的資料
        parseResult(result);
    },
    function(err){
        //reject的錯誤
        handleErr(err);
    }
    //function(){
    //  //defered.notify()//一般不常用,可以多次呼叫notify
    //  handlePregress();
    //}
);

優勢

可以在呼叫時在決定每個promise的非同步或者同步。

方便組織

同時執行多個非同步任務的方法如下：

var promises = [promise1, promise2]
$q.all(promises).then(function(responses));

或者：

var promises = [promise1, promise2]
$q.all(promises).then(
    spread(function(return1, return2){})
)

這樣就可以做到多個promise的結果與函式傳入引數的一一對應。
要做到依次執行則使用如下程式碼：

promise1.then(function(){
    promise2.then(functin(){})
})

$q.when()作為快取方法

若一個長時間獲取資源的方法僅需在第一次執行的時候從伺服器獲取，下次直接從本地快取獲得，就可以用如下結構:

app.factory('movie', function($q,$http){
    var cached, p;
    return {
        getMovie:function(){
            return $q.when(cached || p || helper());
        }
    };
    function helper(){
        var defered = $q.defer();
        p = defered.promise;
        $http({method:'get', url:url})
        .success(function(movie){
            cached = movie;
            defered.resolve(movie);
        });
        return defered.promise;
    }
});

這樣的好處在於只有在使用者第一次發起請求時才會從伺服器獲取，在本地有快取的時候，就直接返回快取資料。
同時可以在使用者在短時間頻繁發起請求，而本地還沒有快取時候，避免多次發起伺服器請求的情況（這時候返回的認識promise即變數p）。