web-dev-qa-db-ja.com

angular-複数のhttp呼び出しのデータにアクセスする-約束を解決する方法

私はまっすぐ進むべきだと思う何かに引っかかっています。 3つの異なるAjax呼び出しからデータを取得し、3つすべてを組み合わせて処理し、結果の配列をユーザーに表示する必要があります。

最も単純な形式では、私のコードは次のようになります。

function giftControler ($scope, $http) {
  var names = $http.get("names.json"),
      naughty = $http.get("naughty.json"),
      Nice = $http.get("Nice.json");

変数は実際の結果ではなくプロミスに割り当てられ、httpリクエストはイベントキューに渡されることを理解しています。これらに実行可能ステートメントを続けた場合、これらの変数は未定義になります。これらの約束が処理を継続するために解決するのを待つ方法がわかりません。

私がやりたいのは、すぐにコードを追加することです：

      for (var i=0; i<names.length; i++){
        for (var j=0; j<Nice.length; j++){
          if (names[i] === Nice[j]){
            names[i] = names[i] + "--Yay!!";
          };
        };
      };                
      $scope.kids = names;

問題は、あたかもそれらが解決された配列であるかのように、約束をうまく処理できないことです。 Javascriptは、http呼び出しの直後にステートメントのこれらを確認し、約束が解決されていなくても、すぐに実行しようとします。

私が立ち往生しているのは、 $ http api がerror、success＆thenの3つの関数を持つpromiseオブジェクトを提供していることです。この場合、どうすればいいのかわかりません。 3つすべてに1つの成功関数が必要です。 3つすべてを解決してから、それぞれのデータを処理してから、結果をangularモデルに割り当てます。

私は明らかな何かを見逃していると確信していますが、誰か提案がありますか？私の実際の作業では、複数のデータソースと多くの処理（値の比較、並べ替え、連結など）をいくつか実行して、1つの適切なデータコレクションを作成しますが、この問題に合格することはできません。

おかげで、

httpangularjs
54
MyTimeFinder

$ qの関数「all」を使用できます。

function giftControler ($scope, $http, $q) {
  var names = $http.get("names.json"),
      naughty = $http.get("naughty.json"),
      Nice = $http.get("Nice.json");
  $q.all([names, naughty,Nice]).then(function(arrayOfResults) { 
      ... This callback would be called when all promised would be resolved
    });

この方法は少しきれいです。

ドキュメントへのリンクは次のとおりです。 http://docs.angularjs.org/api/ng.$q

157
Valentyn Shybanov