複数の角度$ httpコールを$ qと同期させる/ $ q.catchでエラー処理する

Question

角度の$qとJavascriptのpromise apiを正しく使用することができません。それではまた、私はJavascriptでかなり新しく、構文エラーを起こしている可能性があります。

This質問は似ているようだが、それは正確なコピーではないようです...

私のサービスは、この（私のコントローラによって呼び出される）のような方法があります。

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; 
}; 

そして、私をコントローラは、角度の$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 apisで間違いを犯しているはずです。

提案がありますか？

ありがとうございました。あなたはこの

self.getResources = function($q,$http) { 

let promises = []; 

for (let resourceName in $rootScope.resourceNameList) { 

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

}のようなディレクティブで$ qと$ HTTPを注入する必要が

Answer 1

入力データセットに実際に間違いがあると考えているのでこれはおそらく無回答ですが、実際にはこれらの種類の問題を実際に検出する必要があります。.catchを（少なくとも）あなたの根の約束は、実際に何が起きているかすぐに見ることができます。

あなたのケースでは、これはあなたの根強い約束です（既にキャッチされています）。 私はわかりやすくするために改行にそれを壊れました：

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); 
}) 
; 

EDIT：あなたは、$q.allに失敗した約束をフィルタリングする必要がある場合だけ$q.allSettledと交換してください！ここでは完全なAPI：共有するhttps://github.com/kriskowal/q

いくつかの追加の考え：すぐに十分な、あなた自身が.allなどで.pushや.mapを組み合わせたようないくつかの機能が欠けていると$qを訴えています。すでにそのための図書館があります。 BluebirdJSを使用することができます！角度はhere's a nifty wrapper for itです。代わりに、あなたのコードは次のようになります：

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); 
}) 
; 

もっと良いでしょうか？

ハッピーコーディング！約束についての素晴らしい記事です：http://taoofcode.net/promise-anti-patterns/

Answer 2

。