Promise API - 結合2個異步調用的結果

Question

使用承諾API，如何並行發送兩個異步請求，並將組合結果作爲響應進行解析。

var get = function(id){ 
      var res1, res2; 
      var deferred = $q.defer(); 
      Db.get(id, "abc") 
       .then(function (d) { 
        //deferred.resolve(d)); 
        res1 = d; 
       }, function (e) { 
        //error 
       }); 

      Db.get(id, "def") 
       .then(function (d) { 
        //deferred.resolve(d)); 
        res2 = d; 
       }, function (e) { 
        //error 
       }); 

      //?????? how to return {res1:res1 , res2: res2} 

      return deferred.promise; 
     }; 

現在，當我調用get（）之類

get(123).then(function(d)){ 
// d= {res1: res1, res2: res2} 
}, 
... 

我需要得到的綜合結果所示。如何使用Angular promise API做到這一點？

Answer 1

正如@Matt所說，你需要使用$q.all，但是用法不太正確。 AngularJS不支持.done和.fail，它們的工作方式並不像這樣，因爲沒有多個值的承諾，而只是對數組有承諾。

如果你正在寫這個使用全Q可以這樣寫：

var get = function (id) { 
    return Q.all([Db.get(id, "abc"), Db.get(id, "def")]) 
     .spread(function (res1, res2) { 
      return {res1: res1, res2: res2}; 
     });//the error case is handled automatically 
}; 

在這種情況下，.spread作用類似.then，除了它傳播一個數組的結果超過的論點承諾了其onFulfilled功能。要改變這一點以使用AngularJS的承諾方法，我們只需要在沒有.spread的情況下做。這導致了以下解決方案：

var get = function (id) { 
    return $q.all([Db.get(id, "abc"), Db.get(id, "def")]) 
     .then(function (res) { 
      return {res1: res[0], res2: res[1]}; 
     });//the error case is handled automatically 
}; 

這樣做的好處是，我們從處理錯誤傳播的所有基本事實grity和存儲部分結果釋放，因爲.then充當過濾器。如果省略錯誤處理程序，它會自動傳播任何錯誤。這意味着如果任一輸入承諾被拒絕，結果將被拒絕。如果兩個promise都成功完成，則res是這些分辨率值的數組。

Answer 2

我有一些要添加到@ForbesLindesay答案。我們希望獲得部分結果：如果請求失敗（例如，服務器發生故障，我們請求其他人刪除某些內容等），我們仍然希望收集有效的響應，並報告錯誤。

我發現我們需要處理每個承諾上的成功和失敗，並返回一個將由$q.all收集的值。

這裏是我們的代碼，簡化和通用（ '項目' ...）：

var promiseList = _.map(itemList, function(item) 
{ 
    return DataService.getISubtems(item.id) 
     .then(
      function(response) 
      { 
       var subItems = response.data; 
       $log.info('Received sub-item list;' + subItems.length + ';items received'); 
       return subItems; 
      }, 
      function(reason) 
      { 
       $log.warn('Sub-item list not received for item;' + item.name + ';' + item.id); 
       $scope.errorList.push('Sub-item list not received for item "' + item.name + '"'); 
      } 
     ); 
}); 
$q.all(promiseList) 
    .then(function(itemArray) 
    { 
     // We get an array of arrays interleaved with undefined value when an error was raised. 
     // That's because error handling doesn't return anything, ie. returns undefined. 
     // We remove these undefined values then put all operations at the same level. 
     var allOperations = _(operationArray).reject(_.isUndefined).flatten().value(); 
     if ($scope.errorList.length > 0) 
     { 
      NotificationService.warning('Items Fetching', 'Errors while getting item list:\n' + 
       $scope.errorList.join('\n')); 
     } 
     $scope._onItemListReceived(allItems); 
    }); 

注意，我們使用Lodash（_.map，_.flatten，_.reject，_.isUndefined ），但我認爲這個用法很清楚（這是這個庫的好處！）。

Answer 3

您可以使用angular-q-spread庫，然後使用相同的代碼爲@ ForbesLindesay的第一個例子：

// The module needs $q-spread as a dependency: 
// angular.module('…', ['$q-spread']); 

var get = function (id) { 
    return $q.all([Db.get(id, "abc"), Db.get(id, "def")]) 
     .spread(function (res1, res2) { 
      return {res1: res1, res2: res2}; 
     }); 
};