Multiple post requests in the same method in Angular

Question

        $scope.observer_vel_data = function(){ 
        $scope.showOverlay('loadRefPubVel'); 
        $http({
            //First http post request
            method:'POST',
            url:'/api/observer_vel_data', 
            data:$scope.payload_array,
        }).then(function successCallback(response){
            console.log('API Endpoint: vel data success!'); 
            //Second post request is made in the method call below
            $scope.sentiment_var = $scope.observer_send_sentiment();
            $scope.vel_var = response.data.velocity1;
        }, function errorCallback(response){
            // console.log(response); 
            $scope.addAlert({
                type: 'danger',
                msg: 'API call failed' 
            });
        }).finally(function(){
            console.log("hello");
            console.log($scope.sentiment_var);
            //graph is rendered
            $scope.update_velocity($scope.vel_var,$scope.sentiment_var);
            $scope.hideOverlay('loadRefPubVel'); 
        });
    };

So I am trying to render a graph which uses data from two different and independent post requests. However, the graph command is called before the data from the second post request arrives. How can I fix this ? The commands which make the post requests and render the graph are mentioned as comments in the code posted.

        $scope.observer_send_sentiment = function (){  
        // $scope.showOverlay('loadRefSentiment');
        var data = { 
            "angularGroups":$scope.groups
        };
        // console.log(data);
        $http({
            method:'POST',
            url:'http://localhost:9612/sentiment_velocity',
            data:data
        }).then(function successCallback(response){
            var data = response.data;
            var json_obj = JSON.parse(data.replace(/\'/g,'"'));
            var sentiments = json_obj["sentiments"];
            // console.log(sentiments);
            $scope.update_sentiment(sentiments); 
            console.log(sentiments);
            return sentiments;
        }, function errorCallback(response){
            var errmsg = response.statusText; 
            console.log(response); 
            $scope.addAlert({
                type: 'danger',
                msg: 'API call failed (sentiment basic)' + errmsg,  
            });
        }).finally(function(){
            // $scope.hideOverlay('loadRefSentiment');
        });
    };

Is this the second call: "$scope.sentiment_var = $scope.observer_send_sentiment();"? If so were is the actual http request code, please include. — alphapilgrim
– alphapilgrim, Commented Apr 6, 2017 at 19:10
do both of these requests live in the same controller/factory? — alphapilgrim
– alphapilgrim, Commented Apr 6, 2017 at 19:14

crizzis · Accepted Answer · 2017-04-06 19:28:39Z

If I understand correctly, you want the code in finally(...) execute only after the second request ends.

To enforce that, you need to chain the HTTP request promises, meaning you need to return the promise of the second HTTP request from the success handler of the first request. Your code should look like more or less like this:

$scope.observer_vel_data = function(){ 
    $scope.showOverlay('loadRefPubVel'); 
    $http({
        method:'POST',
        url:'/api/observer_vel_data', 
        data:$scope.payload_array,
    }).then(function successCallback(response){
        console.log('API Endpoint: vel data success!');
        $scope.vel_var = response.data.velocity1;
        return $scope.observer_send_sentiment();

    }).catch(function errorCallback(response) {
        //This catch will handle errors from both HTTP requests
        $scope.addAlert({
            type: 'danger',
            msg: 'API call failed' 
        });
    })
    .finally(function(){
        console.log("hello");
        console.log($scope.sentiment_var);
        //graph is rendered
        $scope.update_velocity($scope.vel_var,$scope.sentiment_var);
        $scope.hideOverlay('loadRefPubVel'); 
    });
};

$scope.observer_send_sentiment = function() {
    return $http({...}).then(function(response) {
        //process the response
        ...
        $scope.sentiment_var = parsedResponseData;
    });
};

Note that the finally callback will always execute, regardless of whether an error occured or not. If you want some of it to execute only if an error was not encountered, add another .then(function() {...}) instead.

EDIT: Now that we can that see what observer_send_sentiment does, it might make sense for you to stick to the .then(function successCallback() {...}, function errorCallback() {...}) syntax, and keep separate error callbacks for each of the requests. Just keep in mind that if you ever add another then block and you want errors along the promise chain to prevent executing further .then(function() {...}) blocks, you should add return $q.reject(response) at the end of both errorCallbacks. Not using q.reject from within error callbacks with the .then(function successCallback() {...}, function errorCallback() {...}) syntax renders the promise resolved, not rejected.

Collectives™ on Stack Overflow

Multiple post requests in the same method in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related