javascript - 使用 $q 同步多个 Angular $http 调用/使用 $q.catch 进行错误处理

Question

我无法正确使用 Angular 的 $q 和 Javascript 的 promise api。再一次，我是 Javascript 的新手，可能会犯语法错误。

This问题看起来很相似，但它似乎不是一个精确的副本......

我的服务有一个这样的方法(由我的 Controller 调用):

self.getResources = function() {

    let promises = [];

    for (let resourceName in $rootScope.resourceNameList) {

        promises.push($http({ 
            url : '/' + resourceName,
            method : 'GET' 
        }).then(function (res) { 
            return { resourceName : res.data};
        }));
    }
    return promises;
};

我的 Controller 将返回的 promise 列表传递给 Angular 的 $q.all():

let promises = resourceService.getResources();

$q.all(promises).then(function (resultsArray) {

    // resultsArray should be an array of elements like:
    // [ {cars : [...]}, {coffeePots : [...]}, {motorBoats : [...]} ]
    // with size = resourceNameList.length(), correct? 

    // this log is never called.
    console.log(resultsArray);
    $scope.resources = resultsArray;
});

最后，在我的 HTML 中，我尝试遍历并显示资源:

.
.
.
<!-- 'cars' is and example, but I am trying to retrieve this data in the same way -->
<tr ng-repeat="item in resources[cars]">
    <td>{{item.property1}}</td>
    <td>{{item.property2}}</td>
</tr>

该表未显示任何结果。

我可以从控制台看到 HTTP 请求成功并返回数据，所以我一定是在使用 promise 或 $q api 时出错。

有什么建议吗？

非常感谢。

Answer 1

我知道这可能不是答案，因为您已经认为您的输入数据集确实存在错误，但您确实应该通过添加 .catch 来更早地检测到这些类型的问题。在(至少)你的根 promise 上，这样你就可以立即看到实际发生了什么。

在您的情况下，这是您的根本 promise (已经附加了问题)。为了清楚起见，我将其分成换行符:

let promises = resourceService.getResources();

$q
 .all(promises)

 // unfortunately, .then only gets executed if all of these promises succeed.
 .then(function (resultsArray) {
   console.log(resultsArray);
   $scope.resources = resultsArray;
 })

 // there is a disturbance in the force!
 .catch(function (error) {
    // you can console.log(error) OR
    window.open("https://stackoverflow.com/search?q="+error.message);
 })
 ;

编辑:如果您需要过滤掉 $q.all 上的失败 promise , 只需将其替换为 $q.allSettled !完整的 API:https://github.com/kriskowal/q

一些额外的想法要分享:很快，您会发现自己在提示 $q缺少一些功能，例如组合 .push或 .map与 .all等等。已经有一个图书馆了；你可以使用 BluebirdJS !和 here's a nifty wrapper for it对于 Angular 。相反，您的代码将如下所示:

Promise.map($rootScope.resourceNameList, function(resourceName) {
      return $http({ 
        url : '/' + resourceName,
        method : 'GET' 
      });
}, {concurrency: 3}) // did I mention you could control concurrency?
.then(function(results) {
  console.log(results); // $http promises that were resolved!
},function(rejects) {
  console.log(rejects); // $http promises that were rejected :(
})
.catch(function (error) {
    // you can console.log(error) OR
    window.open("https://stackoverflow.com/search?q="+error.message);
})
;

好多了，对吧？

编码愉快!这是一本关于 promise 的好书:http://taoofcode.net/promise-anti-patterns/