$http.post 在另一个 $http.post 中调用

Question

我想在另一个 $http.post 中创建一个 $http.post，因为第二个依赖于第一个。基本上我正在做的是：

$http.post("/my/server/location").then(function (response) {
    $http.post("/my/second/api/call/"+response.data.number).then(function (response) {
      $scope.message = "Created successfully";
    }, function (response){
      $scope.message = "Could not create";
    });

    //Create modal from response.data received from first API Call
    //Add $scope.message to this modal.
    });

如您所料，发生的事情是第二个在返回初始承诺之前一直处于待定状态，我想在模态中显示 $scope.message，因此这是不可能的。虽然我明白为什么会这样，但我似乎无法弄清楚如何解决这个问题。我尝试处理 $q 但弄得一团糟。任何帮助将不胜感激。

Answer 1

你说得对，$q 在这里无济于事，除非你希望同时执行两个承诺，然后等待它们的响应。

在这里你想执行一个承诺然后另一个，根据你的代码看起来不错。但是，在第二个承诺执行后你想做的任何事情都需要在那个 .then() 块中完成。

示例：

$http.post("/my/server/location").then(function (response) {
    $http.post("/my/second/api/call/"+response.data.number).then(function (response) {
       $scope.message = "Created successfully";
       // Create modal from response.data received from first API Call
    }, function (error){
        $scope.message = "Could not create";
    });
});

Answer 2

试试这个

var fn = {
    test: function() {
        return $http.post("/my/server/location");
    }
};

fn.test().success(function(response) {
  $http.post("/my/second/api/call/"+response.data.number).then(function (response) {
      $scope.message = "Created successfully";
    }, function (response){
      $scope.message = "Could not create";
      }
});

Answer 3

到 chain 消息在第二个 XHR 的成功处理程序和拒绝处理程序中使用 return statement:

$http.post("/my/server/location").then(function (response1) {
    return $http.post("/my/second/api/call/"+response1.data.number)
      .then(function (response2) {
        $scope.message = "Created successfully";
        return $scope.message;
    }).catch(function (errorResponse2) {
        $scope.message = "Could not create";
        return $scope.message;
    }).then(function(message) {

        //Create modal from response1.data received from first API Call
        //Add `message` from the second XHR to this modal.

        return [response1.data, message];
    });
});

.catch 拒绝处理程序中的 return statement 将被拒绝的承诺转换为成功，由链中的下一个 .then 方法处理。

最终承诺 returns 一个数组，其中包含来自第一个 XHR 的数据和来自第二个 XHR 的消息。

Chaining Promises

Because calling the .then method of a promise returns a new derived promise, it is easily possible to create a chain of promises.

It is possible to create chains of any length and since a promise can be resolved with another promise (which will defer its resolution further), it is possible to pause/defer resolution of the promises at any point in the chain. This makes it possible to implement powerful APIs.

— AngularJS $q Service API Reference - Chaining Promises

Answer 4

$http.post("/my/server/location")
 .then(function (response) {

    $http.post("/my/second/api/call/"+response.data.number).then(function 
      (response) {

     }, function (response){

     });

    $scope.message = "Created successfully";

     //Create modal from response.data received from first API Call
    //Add $scope.message to this modal.
    $scope.buildModal(response.data);

})
.catch(function(error){
    $scope.message = "Could not create";
    $scope.buildModal();
})

所以您遇到的问题是 $scope.message = "Created successfully"; 被锁定在嵌套的 api 调用中。通过将其取出，您可以在第一个 api 调用后立即构建您的模态。在上面的代码中，没有任何东西等待第二个 api 调用完成，因为它的 .then 块

中没有任何东西

我将模态构建移到了一个单独的函数中 buildModal 因为它必须从 .then 和 .catch 块中调用

$http.post 在另一个 $http.post 中调用

$http.post call inside another $http.post

javascript

angularjs

angular-promise

Chaining Promises