I have been meaning to write this post for almost a year now but with all the work that has gone into writing my new book I haven’t had the time. Now I have a bit more free time I intend to start posting on this blog more regularly.

So in the middle of last year I was working on building a site in AngularJS where I had two API endpoints to connect to and while neither API calls required the results of the other I needed to be able to process the returned data for both at the same time.

My first approach was to simply call one API after I had returned the result of the other:

$http({method: 'GET', url: '/api-one-url', cache: 'true'}).then(function(apiOneData){ $http({method: 'GET', url: '/api-two-url', cache: 'true'}).then(function(apiTwoData){ console.log(apiOneData, apiTwoData); }); });

There are many problems with this approach, firstly the second API call wouldn’t be called until the first had been completed which will delay the results and secondly the code simply doesn’t look very nice and imagine how this would look if we had 7 or 8 different API calls all nested within one another like this. With this in mind I thought there must be a nicer way to do this. This is where I decided to look at how I could combine the promises, my first port of call was to look at the documentation for promises in AngularJS but the information I found wasn’t particularly useful (The documentation on the AngularJS site can be found on the $q page).

Having failed to find out the information I wanted from the AngularJS documentation I then had to look elsewhere. As I knew that AngularJS uses the Q library to handle promises I decided to look directly at the Q libraries own documentation (When using the Q documentation with AngularJS it is important to note that where it refers to Q you should replace it with $q). Upon looking at the Q documentation I learnt about the $q.all() method. To use the $q.all() method we simply pass it an array of promises we want to resolve, what this does is it takes the array of promises and returns us a single promise which will resolve once all the original promises have been resolved. The data passed to our .then() method when using $q.all() is an array of the returned values in the same order that we passed our original promises.

If we then refactor the original two API calls from earlier it now using the Q.all() method it would look like this:

var promise1 = $http({method: 'GET', url: 'a/pi-one-url', cache: 'true'}); var promise2 = $http({method: 'GET', url: '/api-two-url', cache: 'true'}); $q.all([promise1, promise2]).then(function(data){ console.log(data[0], data[1]); });

This is much more legible than the original nested method we showed before. Hopefully this short post on the $q.all() method will help you to understand how to combine two promises when using AngularJS. If you are using promises a lot in AngularJS I would encourage you to spend some time looking over the Q documentation as in addition to $q.all() there are many more useful features you can take advantage of.

Are you looking for your next role? I work as an Lead Engineer at RVU where we are currently looking for Full Stack software engineers based in our London office. Find out more

Please enable JavaScript to view the comments powered by Disqus.