摘要：回調函數有兩個參數，，分別代表執行成功與失敗。有兩個回調函數，分別表示執行成功和執行失敗的回調，回調函數的參數為在第一步邏輯中標記方法傳入的字符串。鏈式操作如果中邏輯的執行需要時間等待，那么，中回調函數的返回值為對象時，才能夠按順序執行。

相信有一些開發經驗的朋友就應該知道，對于JavaScript而言，promise十分重要，在開發中總能用到。因此掌握好它是一件必須做的事情。

我之前寫過一篇文章，工作總結：jQuery高級應用之Deferred對象，介紹jquery中的promise，因此關于promise的基礎介紹就不再詳細講解，這篇文章會重點關注angular中promise的實現。

我們首先有一個簡單的html標簽，下面的例子都會基于這個標簽來書寫

在angular中，$q是一個非常重要的service。通過$q，angular有兩種比較常用的方式來實現promise，分別是ES6風格與jquery風格。

我們直接來看看js代碼

angular.module("app", [])
.controller("demoController", function($q, $timeout) {
    var a = 1;
    $q(function(resolve, reject) {
        $timeout(function() {
            if(a == 1) {
                console.log("resolve");
                resolve("hello, JAKE");    
            } else {
                console.log("reject");
                reject("JAKE is not here!")
            }
        }, 2000)
    })
    .then(function(greeting) {
        console.log("success, " + greeting);
    }, function(reason) {
        console.log("failed, " + reason);
    })
})

當a==1，輸出結果為

"resolve"
"success, hello, JAKE"

當a!=1，輸出結果為

"reject"
"failed, JAKE is not here!"

點我查看實例地址

上例中，我直接將第一步邏輯在$q()中處理。回調函數有兩個參數，resolve, reject，分別代表執行成功與失敗。

然后在對應的邏輯里面，使用resolve/reject標記邏輯的執行狀態。then方法中的代碼會在第一步的邏輯執行完了才執行，為了證明這一點，我在第一步的邏輯中設置了2秒的延遲。then會等待第一步執行完畢。

then有兩個回調函數，分別表示執行成功和執行失敗的回調，回調函數的參數為在第一步邏輯中標記方法傳入的字符串。如果第一步邏輯執行成功，則會執行then第一個回調函數，如果失敗，則會執行第二個回調。

與jquery實現類似，我們需要定義個defer對象，并在第一步邏輯中手動返回promise

angular.module("app", [])
.controller("demoController", function($q, $timeout) {
    var a = 1;
    
    $q.when(function() {
        var defer = $q.defer();
        $timeout(function() {
            defer.notify("notify jake.");
            
            if(a == 1) {
                console.log("rsolve");
                defer.resolve("hello, jake");
            }
            else {
                console.log("reject");
                defer.reject("jake is not here.")
            }
        }, 2000);
        return defer.promise;
    }())
    .then(function(greeting) {
        console.log("success, " + greeting);
    }, function(reason) {
        console.log("fail, " + reason);
    }, function(update) {
        console.log("notify, " + update);
    })
})

當a==1，輸出結果為

"rsolve"
"notify, notify jake."
"success, hello, jake"

當a!=1 輸出結果為

"reject"
"notify, notify jake."
"fail, jake is not here."

點擊我查看實例

Angular 中 Promise 的一些方法，其實從上面的實例就已經能夠知道promise的大概用法，不算復雜。

1. then(successCallback, errorCallback, notifyCallback)
從字面上我們就能夠看出then三個回調的含義，第二個參數與第三個參數為可選。

2. catch(errorCallback)
相當于 then(null, errorCallback)

3. finally(callback, notifyCallback)
無論promise的返回狀態是上面，該方法總是會執行。

如果then中邏輯的執行需要時間等待，那么，then中回調函數的返回值為promise對象時，才能夠按順序執行。因此需要我們手動返回一個promise對象，例子如下

var app = angular.module("app", []);

app.controller("demoController", function($q, $timeout) {
    $q.when(function() {
        var defer = $q.defer();
        $timeout(function() {
            console.log("first");
            defer.resolve();
        }, 2000);
        return defer.promise;
    }())
    .then(function() {
        var defer = $q.defer();
        $timeout(function() {
            defer.resolve();
            console.log("second");
        }, 1000);
        return defer.promise;
    })
    .then(function() {
        console.log("third");    
    })
});

"first"
"second"
"third"

點我查看實例地址
官方文檔中，認為then方法中只需要有返回值

但是如果then的執行不需要時間等待，then中的回調函數的第一個參數，會獲取到上一個then的返回值，然后按順序執行，如下例。

var app = angular.module("app", []);

app.controller("demoController", function($q, $timeout) {
    
    function first() {
        var a = 1;
        var defer = $q.defer();
        $timeout(function() {
            if(a == 1) {
                console.log("first resolve");
                defer.resolve("resolve result");    
            } else {
                console.log("first reject");
                defer.reject();
            }
        }, 2000)
        return defer.promise;
    }
    
    var promiseA = first();
    
    promiseA.then(function(result) {
        // $timeout(function() {
        console.log("second, " + result);
        return "document";
        // }, 1000)
        
    })
    .then(function(result) {
        console.log("third, " + result);
    })
    
});

輸出結果為

"first resolve"
"second, resolve result"
"third, document"

點我查看實例地址

因為表述起來并不是那么容易，因此建議大家通過實例慢慢理解。

$http是對promise的最佳實踐。由于controller生命周期會在controller消亡的時候結束，其中的數據也會銷毀，因此我們常常會將獲取數據的操作放在自定義的服務中。因此我們的實例如下

angular.module("app", [])
.controller("demoController", function(data) {
    data.getData().then(function(resp) {
        console.log(resp);
    })
})
.factory("data", function($http) {
    return {
        getData: function() {
            var url = "https://hq.tigerbrokers.com/fundamental/finance_calendar/get_day/2016-06-26";
            return $http.get(url);    
        }
    }
})

我們將then中回調函數的參數打印出來，發現格式如下

Object {
    config: Object {},
    data: Object {},
    headers: function(d) {},
    status: 200,
    statusText: "OK"
}

這一點與jquery的返回值略有不同，他們分別表示的意思為

config： 請求的配置信息
data： 返回的數據
headers: 請求的頭部信息
status: 返回的狀態碼

點擊查看實例地址