ネストされた$ httpコールで外部応答データにアクセスする

Question

私はAngularJSを初めて利用しています。

私は、次のネストされたの$ HTTP呼び出しを持って、

$http({ 
    method: 'GET', 
    url: host1, 
    params: { 
     'format': 'json', 
    } 
    }).then(function successCallback(response) { 
    for (var i = 0; i < response.data.length; i++) { 

     $http({ 
     method: 'GET', 
     url: response.data[i]['url'] + "packet-trace/base", 
     params: { 
      'format': 'json', 
     } 
     }).then(function successCallback(response2) { 

     //Retrieve some information from first $http call 
     var doSomething = response.data[i]['information']; 
     var doSomething2 = doSomething + response2.data['information']; 

     }, function errorCallback(response2) { 
     //Error 
     }); 
    } 

    }, function errorCallback(response) { 
     //Error 
    }); 

私は最初の$ HTTP呼び出しからデータを取得して、$をhttpからデータを取得し、の一部として、これらのデータの両方を使用する必要があります私の論理。しかし、最初の$ http呼び出しからデータにアクセスすることはできません。ループカウンタ 'i'は常にresponse.dataの長さに等しい。

最初に$ httpコールのデータにアクセスするにはどうすればよいですか？

また、$ httpを連続して呼び出すために使用できる特定のコーディング規則や特定のAPIはありますか？ $ httpコールのネストは面倒でメンテナンスは難しくなります。

ありがとうございました。

Answer 1

これが発生する理由は、ループがAJAX呼び出しが成功する前に反復処理が完了したためです。この段階で、iは明らかにresponse.data.lengthに等しくなります。

あなたはAJAX呼び出し外の値をキャプチャして、あなたは、コールバックの内側にi変数に依存しないようにsuccessコールバックにそれを使用することができます。

for (var i = 0; i < response.data.length; i++) { 
    // Capture the value you need here 
    var someValue = response.data[i]['information']; 

    $http({ 
     method: 'GET', 
     url: response.data[i]['url'] + "packet-trace/base", 
     params: { 
      'format': 'json', 
     } 
    }).then(function successCallback(response2) { 
     // Use the captured value from the first call here 
     var doSomething = someValue; 
     var doSomething2 = doSomething + response2.data['information']; 
    }, function errorCallback(response2) { 
     //Error 
    }); 
} 

Answer 2

まあ理由は非同期性質のものですJavaScriptの。あなたのユースケースにはasyncを使用することをお勧めします。少し複雑に見えるかもしれませんが、非同期の概念を理解すれば、それは使いやすいです。あなたができること：

async.waterfall(
[ 
    function(callback){ 
    $http({ 
     method: 'GET', 
     url: host1, 
     params: { 
     'format': 'json', 
     } 
    }).then(function successCallback(response) { 
     callback(null, response); 
    }); 
    }, 
    function(callback, response){ 
    async.times(response.data.length, function(i,next){ 
     $http({ 
     method: 'GET', 
     url: response.data[i]['url'] + "packet-trace/base", 
     params: { 
     'format': 'json', 
     } 
     }).then(function successCallback(response2) { 

     //Retrieve some information from first $http call 
     var doSomething = response.data[i]['information']; 
     var doSomething2 = doSomething + response2.data['information']; 
     next(null,doSomething, doSomething2); 

    }, function errorCallback(err) { 
     next(err, null); 
     }); 
    }); 
    } 
], 
function(err,doSomethingArr, doSomething2Arr){ 
    // get your arrays here 

});