多个 $http 的 Angular 承诺

Question

我正在尝试进行多次$http 调用，我的代码如下所示：

var data = ["data1","data2","data3"..."data10"];

for(var i=0;i<data.length;i++){
    $http.get("http://example.com/"+data[i]).success(function(data){
        console.log("success");
    }).error(function(){
        console.log("error");
    });
}

我怎样才能保证知道所有$http 呼叫是否成功？如果其中任何一个失败，将执行一些操作。

Answer 1

如果您希望突破第一个错误，那么您需要像这里一样使您的 for 循环同步：Angular synchronous http loop to update progress bar

var data = ["data1", "data2", "data3", "data10"];
$scope.doneLoading = false;
var promise = $q.all(null);

angular.forEach(data, function(url){
  promise = promise.then(function(){
    return $http.get("http://example.com/" + data[i])
      .then(function (response) {
        $scope.data = response.data;
      })
      .catch(function (response) {
        $scope.error = response.status;
      });
  });
});

promise.then(function(){
  //This is run after all of your HTTP requests are done
  $scope.doneLoading = true;
});

如果你希望它是异步的，那么：How to bundle Angular $http.get() calls?

app.controller("AppCtrl", function ($scope, $http, $q) {
  var data = ["data1", "data2", "data3", "data10"];
  $q.all([
    for(var i = 0;i < data.length;i++) {
      $http.get("http://example.com/" + data[i])
        .then(function (response) {
          $scope.data= response.data;
        })
        .catch(function (response) {
          console.error('dataerror', response.status, response.data);
          break;
        })
        .finally(function () {
          console.log("finally finished data");
        });
    }
  ]).
  then(function (results) {
    /* your logic here */
  });
};

这篇文章也不错：http://chariotsolutions.com/blog/post/angularjs-corner-using-promises-q-handle-asynchronous-calls/

Answer 2

您也可以使用$q.all() 方法。

所以，从你的代码：

var data = ["data1","data2","data3"..."data10"];

for(var i=0;i<data.length;i++){
    $http.get("http://example.com/"+data[i]).success(function(data){
        console.log("success");
    }).error(function(){
        console.log("error");
    });
}

你可以这样做：

var promises = [];
data.forEach(function(d) {
  promises.push($http.get('/example.com/' + d))
});
$q.all(promises).then(function(results){
  results.forEach(function(data,status,headers,config){
    console.log(data,status,headers,config);
  })
}),

这基本上意味着执行整个请求并设置所有完成后的行为。

On previous comment:

使用状态您可以了解是否有任何问题。如果需要（例如超时），您还可以为每个请求设置不同的配置。

如果其中任何一个失败，将执行一些操作。

From docs 也是based on A+ specs:

$q.all(successCallback, errorCallback, notifyCallback);

Answer 3

接受的答案还可以，但还是有点难看。您有一系列要发送的内容.. 与其使用for 循环，不如使用Array.prototype.map？

var data = ["data1","data2","data3"..."data10"];

for(var i=0;i<data.length;i++){
    $http.get("http://example.com/"+data[i]).success(function(data){
        console.log("success");
    }).error(function(){
        console.log("error");
    });
}

这就变成了

var data = ['data1', 'data2', 'data3', ...., 'data10']
var promises = data.map(function(datum) {
  return $http.get('http://example.com/' + datum)
})
var taskCompletion = $q.all(promises)
// Usually, you would want to return taskCompletion at this point,
// but for sake of example

taskCompletion.then(function(responses) {
  responses.forEach(function(response) {
    console.log(response)
  })
})

这使用了更高阶的函数，因此您不必使用for 循环，看起来也更容易。否则，它的行为与发布的其他示例相同，因此这纯粹是美学上的变化。

success 与 error - success 和 error 上的一个警告词更像是回调，并且是警告您不知道承诺如何工作/没有正确使用它。 Promise then 和 catch 将链接并返回一个新的 Promise 封装迄今为止的链，这是非常有益的。此外，使用success 和error（$http 的调用站点以外的任何其他地方）是一种异味，因为这意味着您明确依赖于 Angular HTTP 承诺，而不是任何符合 A+ 的承诺。

换句话说，尽量不要使用success/error - 它们很少有原因，而且它们几乎总是表明代码异味，因为它们会引入副作用。

---

关于您的评论：

我在 $q.all 上做了我自己的非常简单的实验。但它只有在所有请求都成功时才会触发。如果一个失败了，什么都不会发生。

这是因为all 的约定是，它要么解析如果每个承诺都成功，要么如果至少有一个失败则拒绝。 p>

不幸的是，Angular 内置的$q 服务只有all；如果您希望拒绝的承诺不会导致最终的承诺被拒绝，那么您将需要使用allSettled，它存在于大多数主要的承诺库中（如 Bluebird 和 kriskowal 的原始 Q）。另一种选择是自己动手（但我建议 Bluebird）。