以特定順序執行$ http請求

我有大約5個請求是在我的視圖加載時進行的。這是一個編輯表單：

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

現在我想reqA()和reqB()異步加載，如果可能返回一個承諾。

reqC()和reqD()應該只reqA()和reqB()完成後裝入並執行他們的承諾。

reqE()只應在reqC()和reqD()負荷。

這是我想要做的，但是我不知道該如何去做。我可以通過鏈接承諾而不是以我想要的方式異步或一個接一個地加載它們。

來源

2017-01-05 user3718908

檢查出來的'$ q'模塊 – reptilicus

你可以用'$ q.all（）'創建的承諾數組後解決了一個承諾：他們最多在一個或其他方式返回一個承諾解決。例如'q.all（[reqA（），reqB（）]）。then（（）=> reqC（））' – rob

@rob試過你的代碼，它似乎關閉了，我的IDE強調了它。請給你解釋一下。 – user3718908

如果您的功能都使用$http提供程序，則很容易完成。您將要修改的功能，以這樣的

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

返回$http調用的結果，現在他們回來的承諾，你可以方便地使用$ Q提供商來編排您的要求：

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

對於經常JS（非ES6）：

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

如果你不想在你的函數返回的$http的結果，你將需要設置

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

來源

2017-01-05 22:38:22

非常感謝，你的回答對我有很大的幫助，爲了更好的理解，我會詳細瞭解這個「$ q」的東西。 :) – user3718908

這是一個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' ]); 
});

我假設你正在使用的角度1，如果你是不是有Promise是在全球範圍內提供幾乎所有的環境。

來源

2017-01-05 22:37:10 mkalish

以特定順序執行$ ​​http請求

回答

相關問題

以特定順序執行$ http請求