Angular callback after API call

Question

I have an angular app but sometimes my callbacks seem to execute before they should. I have defined an service for my api calls, its methods look like this.

    function addOffer(id) {
        var request = $http({
            method: "get",
            url: "/api/campaign/offers",
            params: {
                action: "add",
                id: id
            }
        });
        return ( request.then(handleSuccess, handleError) );
    }
    function handleError(response) {

        // The API response from the server should be returned in a
        // nomralized format. However, if the request was not handled by the
        // server (or what not handles properly - ex. server error), then we
        // may have to normalize it on our end, as best we can.
        if (
            !angular.isObject(response.data) || !response.data.message
        ) {

            return ( $q.reject("An unknown error occurred.") );

        }

        // Otherwise, use expected error message.
        return ( $q.reject(response.data.message) );

    }

    function handleSuccess(response) {
        return ( response.data );

    }

And then in my controller I have scope functions defined like this

$scope.addOffer = function(){
    campaignService.addOffer($scope.id).then(
        loadRemoteData()
    );
};

The load remote data function syncs the client with what is stored in the application backend.

My problem is that in the controller method addOffer, the loadRemoteData() function fires before the offer is added, so that it loads the data without the new offer. But then upon a forced refresh that offer is there. Is there something that needs to be done differently so that this will work as expected?

After good amount of research into $q and $http promise implementation, I fell back on my JavaScript basics and answered your question. This again iterates why one's basics must be very strong. — Raju Mandapati
– Raju Mandapati, Commented Oct 15, 2014 at 18:04

Raju Mandapati · Accepted Answer · 2014-10-15 18:02:50Z

2

The problem is with () in loadRemoteData(). No matter where you do this, the loadRemoteData() function will be actually executed. If you just want to pass loadRemoteData function as a success callback to .then() then you should simply pass the name of the function.

Change your controller code to:

$scope.addOffer = function(){
    campaignService.addOffer($scope.id).then(loadRemoteData);
};

edited Oct 15, 2014 at 18:02

answered Oct 15, 2014 at 17:18

Raju Mandapati

6916 silver badges22 bronze badges

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

2 Comments

jankyd Over a year ago

This worked, frustrating that it was such a simple concept of JS. Guess I need to brush up on my JS basics.

Raju Mandapati Over a year ago

Sometimes we miss to see intricate details like these. I do that many times. But as you're saying, fundamentals are all you need.

Collectives™ on Stack Overflow

Angular callback after API call

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related