$http.post call inside another $http.post

Question

I want to make an $http.post inside another $http.post as the second one is dependant on the first. Basically what I'm doing is:

$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.
    });

What's happening as you would have guessed is the second one stays pending until the initial promise is returned, and I want to show $scope.message in the modal which is hence, not possible. While I understand why that's happening, I can't seem to figure how to get around that. I tried dealing with $q but made a mess out of it. Any help will be gladly appreciated.

So the issue is that $scope.message is only being defined after the second api call returns? And you want it after the first call returns? — Cameron Rodriguez, Apr 12 '17 at 18:45

georgeawg · Accepted Answer · 2017-04-12T19:35:15.073

To chain the message use a return statement in both the success handler and the rejection handler of the second XHR:

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

The return statement in the .catch rejection handler converts the rejected promise to a success which is handled by the next .then method in the chain.

The final promise returns an array which has both the data from the first XHR and the message from the second 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

This answer fits best with my API. Works like a charm. Thanks for helping out! — Gaurav Goenka, Apr 13 '17 at 09:09

score 0 · Answer 2 · answered Apr 12 '17 at 18:44

You're right, $q won't help here unless you want both promises to be executed at once and then wait for both of their responses.

Here you want to execute one promise then the other, which according to your code looks fine. However, anything you want to do after the second promise has executed needs to be done in that .then() block.

Example:

$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";
    });
});

Thanks Ben but this will not work. The second API will not always return a 200. It depends on the user input. So the workflow is -> First API returns 200 -> second API if returns 200, then store success message, else store failure message -> Create modal with data from first API and append message from second API. — Gaurav Goenka, Apr 13 '17 at 06:32

score 0 · Answer 3 · answered Apr 12 '17 at 20:06

$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();
})

So the issue with what you had was that $scope.message = "Created successfully"; was locked in the nested api call. By taking it out of that you can build your modal immediately after the first api call. In the code above, nothing is waiting for the second api call to finish because nothing is in its .then block

I moved the modal building to a separate function buildModal because it has to be called both from the .then and the .catch block

Thanks Cameron but this will not work. `$scope.message` is not the error output of the first API call but the second. — Gaurav Goenka, Apr 13 '17 at 06:14

score -1 · Answer 4 · answered Apr 12 '17 at 18:46

-1

Try this

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

answered Apr 12 '17 at 18:46

samnu pel

914
5
12

`success` has been deprecated for some time. – Phix Apr 12 '17 at 18:49

$http.post call inside another $http.post

4 Answers4

Chaining Promises