Angular JS chaining two webservices calls

Question

Looking to get the right syntax to do the following :

1) empty object results = {}
2) first webservice call finished = results.webservice1 = data;
3) second webservice call finished = results.webservice2 = data;
4) Complete

I have something like this but syntax doesn't feel right

 function getClaimSummary(filter) {
        let deferred = $q.defer();

        $http.post(configSettings.Api.GetClaimSummary, filter, { withCredentials : true })
            .success(function(data){
                deferred.resolve(data);
            })
            .error(function(error){
                deferred.reject(error);
            });

        return deferred.promise;
    }

    function getPolicySummary(filter) {
        let deferred = $q.defer();

        $http.post(configSettings.Api.GetPolicySummary, filter, { withCredentials : true })
            .success(function(data){
                deferred.resolve(data);
            })
            .error(function(error){
                deferred.reject(error);
            });

        return deferred.promise;
    }

    function calculateAccumulations(filter){
        service.result = {};

        //Get Claims Summary
        getClaimSummary(filter).then(function(data){
            service.result.claims = data;
        }).then(getPolicySummary(filter).then(function(data){
            service.result.policy = data;
            showAccumulations();
        }));
    }

Martijn Welker · Accepted Answer · 2016-06-20 10:33:16Z

2

$http itself already returns a promise, so there's no need to create your own, you could also handle both promises at the same time instead of waiting for eachother like so:

function getClaimSummary(filter) {
    return $http.post(configSettings.Api.GetClaimSummary, filter, { withCredentials : true });
}

function getPolicySummary(filter) {
    return $http.post(configSettings.Api.GetPolicySummary, filter, { withCredentials : true });
}

function calculateAccumulations(filter){
    service.result = {};

    //Get Claims Summary
    $q.all({
        claims: getClaimSummary(filter),
        policy: getPolicySummary(filter)
    }).then(function (result) {
        service.result = result;
    });
}

You could even save some duplicate code doing it like so:

function fetchData(type, filter) {
    return $http.post(configSettings.Api[type], filter, { withCredentials : true });
}

function calculateAccumulations(filter){
    service.result = {};

    //Get Claims Summary
    $q.all({
        claims: fetchData('GetClaimSummary', filter),
        policy: getPolicySummary('GetPolicySummary', filter)
    }).then(function (result) {
        service.result = result;
    });
}

More information about $q can be found here.

answered Jun 20, 2016 at 10:33

Martijn Welker

5,6151 gold badge19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StevieB Over a year ago

Thanks thats perfect

Collectives™ on Stack Overflow

Angular JS chaining two webservices calls

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related