Question

我的视图加载时有大约5个请求。这是一个编辑表单：

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

现在我想要reqA()和reqB()异步加载，如果可能的话，返回一个promise。

reqC()和reqD()只应在 reqA()后加载并reqB()完成并履行承诺。

reqE()只应在 reqC()和reqD()之后加载。

这就是我想要做的，但我不知道如何去做。我可以通过链接承诺而不是按照我想要的方式异步或一个接一个地加载它们。

Answer 1

如果您的所有功能都使用$http提供程序，则很容易实现。您需要修改函数以返回$http调用的结果，如此

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

现在他们正在返回承诺，您可以轻松使用$ 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;
}

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' ]);
});

我假设您正在使用角度1，如果您不是Promise在全球范围内几乎在所有环境中都可用。

以特定顺序执行$ http请求

2 个答案:

以特定顺序执行$ ​​http请求

2 个答案:

以特定顺序执行$ http请求