以特定顺序执行$ 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请求