Javacript和AngularJS中的Promises

Darren Ji發表於2016-02-07
JavaAngularJSPromise

 

promise是Javascript非同步程式設計很好的解決方案。對於一個非同步方法，執行一個回撥函式。

比如頁面呼叫google地圖的api時就使用到了promise。

 

function success(position){
    var cords = position.coords;
    console.log(coords.latitude + coords.longitude);
}

function error(err){
    console.warn(err.code+err.message)
}

navigator.geolocation.getCurrentPosition(success, error);

 

■ 如何處理多個非同步方法

如果有很多非同步方法需要按序執行呢？async1(success, failure), async2(success, failure), ...asyncN(success, failure),該如何處理呢？

最簡單的，可能會這樣寫：

 

async1(function(){
    async2(function(){
        ...
        asyncN(null, null);
        ...
    }, null)
}, null)

 

以上的程式碼是比較難維護的。

我們可以讓所有的非同步方法執行完畢後出來一個通知。

 

var counter = N;
function success(){
    counter--;
    if(counter === 0){
        alert('done');
    }
}

async1(success);
async2(success);
...
asyncN(success);

 

■ 什麼是Promise和Deferred

deferred表示非同步操作的結果，提供了一個顯示操作結果和狀態的介面，並提供了一個可以獲取該操作結果相關的promise例項。deferred是可以改變操作狀態的。

promise提供了一個用來和相關deferred互動的介面。

當建立一個deferred,相當於一個pending狀態；
當執行resolve方法，相當於一個resolved狀態。
當執行reject方法，相當於一個rejected狀態。

我們可以在建立deferred之後，定義回撥函式，而回撥函式在得到resolved和rejected的狀態提示後開始執行。非同步方法不需要知道回撥函式如何操作，只需要在得到resolved或rejected狀態後通知回撥函式開始執行。

■ 基本用法

→ 建立deferred

var myFirstDeferred = $q.defer();

這裡，對於myFirstDeferred這個deferred，狀態是pending,接下來，當非同步方法執行成功，狀態變成resolved，當非同步方法執行失敗，狀態變成rejected。

→ Resolve或Reject這個dererred

假設有這樣的一個非同步方法：async(success, failure)

 

async(function(value){
    myFirstDeferred.resolve(value);
}, function(errorReason){
    myFirstDeferred.reject(errorReason);
})

 

在AngularJS中，$q的resolve和reject不依賴上下文，大致可以這樣寫：

async(myFirstDeferred.resolve, myFirstDeferred.reject);

→ 使用deferred中的promise

var myFirstPromise = myFirstDeferred.promise;

myFirstPromise
    .then(function(data){
    
    }, function(error){
    
    })

 

deferred可以有多個promise.

 

var anotherDeferred = $q.defer();

anotherDeferred.promise
    .then(function(data){
    
    },function(error){
    
    })
    
//呼叫非同步方法
async(anotherDeferred.resolve, anotherDeferred.reject);

anotherDeferred.promise
    .then(function(data){
    
    }, function(error){
    
    })

 

以上，如果非同步方法async成功執行，兩個success方法都會被呼叫。

→ 通常把非同步方法包裹到一個函式中

 

function getData(){
    var deferred = $q.defer();
    async(deferred.resolve,deferred.reject);
    return deferred.promise;
}

//deferred的promise屬性記錄了達到resolved, reject狀態所需要執行的success和error方法
var dataPromise = getData();
dataPromise
    .then(function(data){
        console.log('success');
    }, function(error){
        console.log('error');
    })

 

如果只關注success回撥函式該如何寫呢？

dataPromise
    .then(function(data){
        console.log('success');
    })

 

如果只關注error回撥函式該如何寫呢？

dataPromise
    .then(null, function(error){
        console.log('error');
    })
    
或

dataPromise.catch(function(error){
    console.log('error');
})

 

如果不管回撥成功或失敗都返回相同的結果呢？

var finalCallback = function(){
    console.log('不管回撥成功或失敗都返回這個結果');
}

dataPromise.then(finalCallback, finalCallback);

或

dataPromise.finally(finalCallback);

■ 值鏈式

假設有一個非同步方法，使用deferred.resolve返回一個值。

function async(value){
    var deferred = $q.defer();
    var result = value / 2;
    deferred.resolve(result);
    return deferred.promise;
}

 

既然返回的是promise,我們就可以不斷then, then下去的。

var promise = async(8)
    .then(function(x){
        return x+1;
    })
    .then(function(x){
        return x*2;
    })
    
promise.then(function(x){
    console.log(x);
})

以上，resolve出的值成為每一個鏈式的實參。

■ Promise鏈式

 

function async1(value){
    var deferred = $q.defer();
    var result = value * 2;
    deferred.resolve(result);
    return deferred.promise;
}

function async2(value){
    var deferred = $q.defer();
    var result = value + 1;
    deferred.resolve(result);
    return deferred.promise;
}

var promise = async1(10)
    .then(function(x){
        return async2(x);
    })
    
promise.then(function(x){
    console.log(x);
})

 

當然一種更易讀的寫法是：

function logValue(value){
    console.log(value);
}

async1(10)
    .then(async2)
    .then(logValue);

 

async1方法的返回值成為then方法中的success方法中的實參。

如果從捕獲異常的角度，還可以這樣寫：

async1()
    .then(async2)
    .then(async3)
    .catch(handleReject)
    .finally(freeResources);

 

■ $q.reject(reason)    

使用該方法能夠讓deferred呈現error狀態，並給出一個出現error的理由。

var promise = async().then(function(value){
    if(true){
        return value;
    } else {
        return $q.reject('value is not satisfied');
    }
})

 

■ $q.when(value)

返回一個promise並帶上值。

function getDataFromBackend(query){
    var data = searchInCache(query);
    if(data){
        return $q.when(data);
    } else {
        reutrn makeAasyncBackendCall(query);
    }
}

 

■ $q.all(promisesArr)

等待所有promise執行完成。

var allPromise = $q.all([
    async1(),
    async2(),
    ...
    asyncN();
])

allProise.then(function(values){
    var value1 = values[0],
        value2 = values[1],
        ...
        valueN = values[N];
        
    console.log('all done');
})

 

相關文章