摘要：假設(shè)家具廠在一周后做完了這個衣柜，并如約送到了張先生家包郵哦，親，這就叫做衣柜，也就是已解決。這樣，整個異步流程就圓滿完成，無論成功或者失敗，張先生都沒有往里面投入任何額外的時間成本。

如果想使用 $http 或者其他異步操作, 那 $q 是必須要掌握的概念啦. Let"s get started!

形象的講解angular中的$q與promise

假設(shè)有一個家具廠，而它有一個VIP客戶張先生。
有一天張先生需要一個豪華衣柜，于是，他打電話給家具廠說我需要一個衣柜，回頭做好了給我送來，這個操作就叫$q.defer，也就是延期，因?yàn)檫@個衣柜不是現(xiàn)在要的，所以張先生這是在發(fā)起一個可延期的請求。
同時，家具廠給他留下了一個回執(zhí)號，并對他說：我們做好了會給您送過去，放心吧。這叫做promise，也就是承諾。
這樣，這個defer算是正式創(chuàng)建了，于是他把這件事記錄在自己的日記上，并且同時記錄了回執(zhí)號，這叫做deferred，也就是已延期事件。
現(xiàn)在，張先生就不用再去想著這件事了，該做什么做什么，這就是“異步”的含義。
假設(shè)家具廠在一周后做完了這個衣柜，并如約送到了張先生家（包郵哦，親），這就叫做deferred.resolve(衣柜)，也就是“已解決”。而這時候張先生只要簽收一下這個（衣柜）參數(shù)就行了，當(dāng)然，這個“郵包”中也不一定只有衣柜，還可以包含別的東西，比如廠家宣傳資料、產(chǎn)品名錄等。整個過程中輕松愉快，誰也沒等誰，沒有浪費(fèi)任何時間。
假設(shè)家具廠在評估后發(fā)現(xiàn)這個規(guī)格的衣柜我們做不了，那么它就需要deferred.reject(理由)，也就是“拒絕”。拒絕沒有時間限制，可以發(fā)生在給出承諾之后的任何時候，甚至可能發(fā)生在快做完的時候。而且拒絕時候的參數(shù)也不僅僅限于理由，還可以包含一個道歉信，違約金之類的，總之，你想給他什么就給他什么，如果你覺得不會惹惱客戶，那么不給也沒關(guān)系。
假設(shè)家具廠發(fā)現(xiàn)，自己正好有一個符合張先生要求的存貨，它就可以用$q.when(現(xiàn)有衣柜)來把這個承諾給張先生，這件事就立即被解決了，皆大歡喜，張先生可不在乎你是從頭做的還是現(xiàn)有的成品，只會驚嘆于你們的效率之高。
假設(shè)這個家具廠對客戶格外的細(xì)心，它還可能通過deferred.notify(進(jìn)展情況)給張先生發(fā)送進(jìn)展情況的“通知”。
這樣，整個異步流程就圓滿完成，無論成功或者失敗，張先生都沒有往里面投入任何額外的時間成本。
好，我們再擴(kuò)展一下這個故事：
張先生這次需要做一個桌子，三把椅子，一張席夢思，但是他不希望今天收到個桌子，明天收到個椅子，后天又得簽收一次席夢思，而是希望家具廠做好了之后一次性送過來，但是他下單的時候又是分別下單的，那么他就可以重新跟家具廠要一個包含上述三個承諾的新承諾，這就是$q.all(桌子承諾，椅子承諾，席夢思承諾)，
這樣，他就不用再關(guān)注以前的三個承諾了，直接等待這個新的承諾完成，到時候只要一次性簽收了前面的這些承諾就行了。

$q 支持兩種寫法, 第一種是類似于ES6標(biāo)準(zhǔn)構(gòu)造函數(shù)寫法

$q(function resolver (resolve, reject) {})

注意:

+ ES6 寫法并不支持 progress/notify 的回調(diào)函數(shù)
+ 在構(gòu)造函數(shù)中拋異常也并不會顯式的reject the promise

// var iWantResolve = false;
var iWantResolve = true;

function es6promise() {
    return $q(function (resolve, reject) {
        $timeout(function () {
            if (iWantResolve) {
                resolve("es6promise resolved");
            } else {
                reject("es6promise reject");
            }
        }, 1000)
    })
}

promise.then(successCb, errCb, notifyCb)

其中successCb 將在 promise resolve 后被調(diào)用, errCb 將在 promise reject 后被調(diào)

notifyCb 將在 deferred.notify 后被調(diào)用, 可以多次調(diào)用

promise.catch == promise.then(null, errCb), 用于處理之前沒有被處理的 rejected promise

promise.finally 將最后被調(diào)用, 一般用于資源釋放的清理操作

es6promise()
    .then(function (data) {
        console.log(data);
    })
    .catch(function (err) {
        console.log(err);
    });

// if(iWantResolve == true) output: es6promise resolved
// if(iWantResolve = false) output: es6promise reject

第二種是類似于 commonJS 的寫法 $q.deferred()

function commonJsPromise() {
    var deferred = $q.defer();
    $timeout(function () {
        deferred.notify("commonJS notify");
        if (iWantResolve) {
            deferred.resolve("commonJS resolved");
        } else {
            deferred.reject("commonJS reject");
        }

    }, 500);

    return deferred.promise;
}

commonJsPromise()
    .then(function /** success callback**/(data) {
        console.log(data);

    }, function /** error callback **/ (err) {
        console.log(err);
    }, function /** progress callback **/ (update) {
        console.log(update);
    });
 
// if(iWantResolve == true) output: commonJS notify commonJS resolved
// if(iWantResolve = false) output: commonJS notify commonJS reject

$q.all([promise1, promise1]) 接受一個包含若干個 promise 的數(shù)組,

等所有的 promise resolve 后, 其本身 resolve 包含上述結(jié)果的數(shù)組 [data1, data2]

如果上述 promise 有一個 reject, 那么$q.all() 會把這個 rejected promise 作為其 rejected promise (只有一個哦)

progress/notify 的 callback 并沒有用

$q.all([es6promise(), commonJsPromise()])
    .then(function (dataArr) {
        console.log("$q.all: ", dataArr);
    }, function (err) {
        console.log("$q.all: ", err)
    }, function /** unnecessary **/ (update) {
        console.log("$q.all", update);
    });
// if(iWantResolve == true) output: $q.all:  ["es6promise resolved", "commonJS resolved"]
// if(iWantResolve = false) output: $q.all:  es6promise reject

$q.reject() 立即返回一個rejected 的 promise, 在鏈?zhǔn)秸{(diào)用的時候很有用

$q.resolve == $q.when(value, successCb, errorCb, progressCb)

value 可能是一個 then-able 的 obj(即可以是 $q.defer() 返回的, 也可以是其他庫產(chǎn)生的), 也可能是任意數(shù)據(jù), 但是 $q.when 最終都會返回一個 promise

$q.when 既可以寫成上述的構(gòu)造函數(shù)形式, 也可以寫成 $q.when(value).then(fn, fn, fn) 的形式

$q.reject("instant reject")
    .catch(function (err) {
        console.log(err);
    });
// output: instant reject

$q.when(commonJsPromise(),
    function /** success callback **/(data) {
        console.log("$q.when success callback function: " + data);
        return "$q.when success callback return another value";
    })
    .then(function (data) {
        console.log("$q.when then function:" + data);
    });

// if(iWantResolve == true) output: 
// $q.when success callback functionL: commonJS resolved
// $q.when then function:$q.when success callback return another value

// if(iWantResolve = false) output: 
// $q.when err callback function: commonJS reject
// $q.when then function:undefined

$q.when("some value", function (data){
    console.log(data);
})

// output: some value

任何在 successCb, errCb 中返回的非 $q.reject()對象, 都將成為一個 resolve 的 promise.
所以可以出現(xiàn)如下語法 promise.then().then().then()

$q.when("1")
    .then(function (data) {
        console.log(data);
        return $q.reject(2);
    })
    .catch(function (err) {
        console.log(err);
        return 3;
    })
    .then(function (data) {
        console.log(data);
    })
    
// output: 1 2 3 

AngularJS Documentation for $q

形象的講解angular中的$q與promise

Angular Promise Chaining Explained

$q.when() Is The Missing $q.resolve() Method In AngularJS

How does Angular $q.when work?

$q.when(promise) calls resolve() instead of reject()