Async functions in AngularJS to behave synchronously

Description

Having a background in server side code entering the world of javascript’s asynchronous functional programming took a bit to wrap my head around and understand. Angular has some awesome libraries that let you make rest endpoint requests using $http module. There was a scenario I ran into recently where I needed to make a rest call to get some ip address information and then make another request based off of the information I received. Under normal synchronous programming this is not a problem, but there is no such guarantee with javascript. I needed to finally learn about callbacks and promises. Although they are similar I decided to go with a callback approach, which I will share here.

The basic premise to callbacks is you are passing functions as objects. The object is read and processed at a certain point. After understanding that functions are just objects in javascript the wheels started clicking in my brain and I was able to get my service to work properly. I made a service that handled the multiple http calls and then I just pass that service as a dependency injection of my controller. Below is just psuedo code on how I was able to accomplish this.




 
//Controller logic
//This makes the call to the service and when the service is done processing what it needs it then processing the function part of this.
$scope.getQuestion() = function() {
  MyService.getQuestion(index, function(question) {
    $scope.questionVariable = question;
  });
}

//Service Logic
this.getQuestion = function(id, cb) {
  this.getIPInfo(id, cb, this.retrieveQuestion);
};

this.getIPInfo(id, cb, retrieveQuestion) {
  $http.get("http://ipinfo.io").success(function (response){
    //On success then we call another function based on what we passed in;
    retrieveQuestion(id, cb);
  });
};

this.retrieveQuestion = function(id,cb) {
  // The cb is the callback from the original controller variable.
  $http.getsomething based off geolocation.success(function(data){
    // On successful call do some logic and set what we need in the question data
    cb(question);
    //This now has the var question completely set the way we need it to populate the original function call.
  });
};

Conclusion

Passing functions as objects is really a neat idea. Event driven asynchronous programming is taking me a while to wrap my head around, but it is really powerful and can accomplish the same end goal as synchronous programming — You just need to know how the beast of javascript behaves.

Comments are closed.