在實際業務中經常需要等待幾個請求完成後再進行下一步操作。但angularjs中$http不支持同步的請求。
解決方法一:
$http.get('url1').success(function (d1) {
$http.get('url2').success(function (d2) {
//處理邏輯
});
});
解決方法二:
then中的方法會按順序執行。
var app = angular.module('app',[]);
app.controller('promiseControl',function($scope,$q,$http) {
function getJson(url){
var deferred = $q.defer();
$http.get(url)
.success(function(d){
d = parseInt(d);
console.log(d);
deferred.resolve(d);
});
return deferred.promise;
}
getJson('json1.txt').then(function(){
return getJson('json2.txt');
}).then(function(){
return getJson('json1.txt');
}).then(function(){
return getJson('json2.txt');
}).then(function(d){
console.log('end');
});
});
解決方法三:
$q.all方法第一個參數可以是數組(對象)。在第一參數中內容都執行完後就會執行then中方法。第一個參數的方法的所有返回值會以數組(對象)的形式傳入。
var app = angular.module('app',[]);
app.controller('promiseControl',function($scope,$q,$http) {
$q.all({first: $http.get('json1.txt'),second: $http.get('json2.txt')}).then(function(arr){
console.log(arr);
angular.forEach(arr,function(d){
console.log(d);
console.log(d.data);
})
});
});
$q的詳細使用方法網上的有很多教程。我也是剛接觸。講不好,不敢亂講。上面的代碼是我按我的理解寫的,經過了測試沒有問題。
---------
本身http的方法是返回一個promise對象,所以理論上不用調用$q的方法,直接then應該也可以實現,比如
網上別人的例子:
如果你用前一個異步執行結果出發下一個異步處理,那就更牛X了。默認的,一個鏈式,像上面演示的那種,是會把前一個執行結果對象傳遞給下一個 then()
的。比如:
<!-- lang: js -->
var deferred = $q.defer();
var promise = deferred.promise;
promise
.then(function(val) {
console.log(val);
return 'B';
})
.then(function(val) {
console.log(val);
return 'C'
})
.then(function(val) {
console.log(val);
});
deferred.resolve('A');
這會在控制檯輸出以下結果:
<!-- lang: js -->
A
B
C
雖然例子簡單,但是你有沒有體會到如果 then()
返回另一個 promise 那種強大。