特定の順序で$ http要求を実行します

Question

私は、私のビューが読み込まれるときに行われる約5つの要求があります。これは、編集フォームのためです：

var reqA = function() {...}; 
var reqB = function() {...}; 
var reqC = function() {...}; 
var reqD = function() {...}; 
var reqE = function() {...}; 

は今、私はreqA()とreqB()は非同期にロードし、可能な場合は、単一の約束を返すようにしたいです。

reqC()とreqD()はreqA()とreqB()が終了した後をロードし、その約束を実行する必要があります。

reqE()は、 およびreqD()の後にをロードする必要があります。

これは私がやりたがっていることですが、どのように動くかわかりません。私はそれらをすべて非同期にロードすることができます。

Answer 1

すべての機能が$httpプロバイダーを使用している場合は、簡単に達成できます。あなたは今、彼らは約束を戻ってきていることを、この

function reqA() { 
    return $http.get(...); 
} 

よう$http呼び出しの結果を返すために、あなたの機能を変更したいと思うでしょう、あなたは簡単にあなたの要求を編成するために$ qをプロバイダを使用することができます。

$q.all([reqA(), reqB()]) 
.then(() => 
    $q.all([reqC(), reqD()]) 
    .then(() => reqE()) 
); 

は、通常のJS（非ES6）の場合：あなたの関数で$httpの結果を返すようにしたくない場合は

$q.all([reqA(), reqB()]) 
.then(function() { 
    $q.all([reqC, reqD()]) 
    .then(function() { 
    reqE(); 
    }); 
}); 

、あなたが設定する必要があります

function reqA() { 
    var deferred = $q.defer(); 
    ... your request code ... 
    // call this if everything is ok 
    deferred.resolve(); 
    // call this if there was an error 
    deferred.reject(); 
    return deferred.promise; 
} 

Answer 2

ここにはexampleがあります。これを見ると、より明確になる可能性があります。 Promiseを使用しています。これは、ほぼすべてのJavaScript環境（IEおよび古いノードのバージョンを除く）でグローバルに使用できます。

angular 
    .module('example', []) 
    .run(function($q) { 
    function requestOne() { 
     return $q.when("one") 
    } 

    function requestTwo() { 
     return $q.when("two") 
    } 

    function requestThree() { 
     return $q.when("three") 
    } 

    function requestFour() { 
     return $q.when("four") 
    } 

    function requestFive() { 
     return $q.when("five") 
    } 

    $q 
     .all([requestOne(), requestTwo()]) 
     .then(function(responses){ 
     console.log(responses[0] === "one"); 
     console.log(responses[1] === "two"); 

     return $q.all([requestThree(), requestFour()]); 
     }) 
     .then(function(nextResponses){ 
     console.log(nextResponses[0] === "three"); 
     console.log(nextResponses[1] === "four") 

     return requestFive(); 
     }) 
     .then(function(lastResponse){ 
     console.log(lastResponse === "five") 
     }) 
}); 

angular.element(document).ready(function() { 
    angular.bootstrap(document, [ 'example' ]); 
}); 

私はあなたが存在しない場合Promiseは、ほぼすべての環境でグローバルスコープで利用可能で、あなたが角度1を使用していることを前提としています。