[AngularJS] AngularJS系列(7) 進階篇之promise

目錄

• 使用promise
  • 補充說明
• $q.all
• $q.when

 

在上節中,我們在http中使用了then 和 在ngResource中返回了一個'延遲對象'.

本節介紹一下angular中的promise.

我覺得可以把js中的promise比作c#中的Task 的await 以同步的時候 實現回調.

 

使用promise

我們先可以了解一下$q的defer()方法創建的對象具有哪些方法

• resolve(value)：用來執行deferred promise，value可以為字符串，對象等。
• reject(value)：用來拒絕deferred promise，value可以為字符串，對象等。
• notify(value)：獲取deferred promise的執行狀態，然后使用這個函數來傳遞它。
• then(successFunc, errorFunc, notifyFunc)：無論promise是成功了還是失敗了，當結果可用之后，then都會立刻異步調用successFunc，或者'errorFunc'，在promise被執行或者拒絕之前，notifyFunc可能會被調用0到多次，以提供過程狀態的提示。
• catch(errorFunc)：拋出異常的時候,觸發該函數.可以為整個then鏈提供一個統一異常處理.
• finally(callback)：總是會被執行，不管 promise 被處理或者被拒絕，起清理作用 

 

1. 引用angular.js后,定義控制器,配置$q環境

    <script src="Scripts/jquery-1.9.1.js"></script>
    <script>
        angular.module('myApp', []).controller('helloCtrl', ['$scope', '$q', '$timeout', function (scope, q, timeout) {
            
        }
    </script>

 

2. 定義一個func函數.

function func() {
    var defer = $q.defer();//創建1個defer對象
    var promise = defer.promise;//獲取promise對象

    promise.then(function (e) {
        console.log('then1-success' + e);
    }, function (e) {
        console.log('then1-faild' + e);
    }, function (e) {
        console.log('then1-notice' + e);
    }).then(function (e) {
        console.log('then2-success' + e);
        throw "then2 exception";
    }).catch(function (e) {
        console.log('catch' + e);
    }).finally(function (e) {
        console.log('finally' + e);
    });
    defer.notify('通知1');
    defer.notify('通知2');
    defer.resolve('成功1');
    defer.reject('失敗1');
}

　

3. 觸發func函數(綁定到scope上即可觸發)

 

補充說明

• 在執行promise的resolve和reject方法時,表示異步結束.(所以此處沒顯示'失敗1')
• then2中,e為undefined.原因是上個then方法中並沒有return對象.(同樣只能在successFunc, errorFunc中返回才有效)
• 如果上個then方法返回一個promise對象,則then2會在promise異步結束時才觸發,並獲取到異步結果.

 

為了更好的說明,這里演示一下then返回promise的情況.

function funcPromise() {
    var defer = q.defer();
    var promise = defer.promise;
    promise.then(function() {
        var thenDefer = q.defer();
        timeout(function() {
            thenDefer.resolve('thenDefer 成功');
            //thenDefer.reject('thenDefer 失敗');//會觸發下個then的errorFunc
        });
        return thenDefer.promise;
    }).then(function(e) {
        console.log('then2-success' + e);
    },function(e) {
        console.log('then2-faild' + e);
    });
    defer.resolve();
}

 

$q.all

$q.all()，允許你等待並行的 promise 處理，當所有的 promise 都被處理結束之后，調用共同的回調

scope.all = function () {
    q.all([getAjaxPromise(), getTimePromise()]).then(function () {
        console.log(arguments);
    });
}

getAjaxPromise 和 getTimePromise 函數都返回promise對象了

 

$q.when

$q.when(),可以將非promise標准的對象 提供給then函數.

scope.when = function() {
    q.when('hello').then(function(e) {
        console.log(e);
    });

    q.when(getAjaxPromise()).then(function (e) {
        console.log(e);
    });
}

getAjaxPromise 是返回promise標准的 而'hello'是一個普通的字符串.

 

本文地址:http://neverc.cnblogs.com/p/5928285.html