AngularJs – Asynchronous Behavior with Promises and $q


what’s  a promise ?

A promise is a method of resolving a value (or not) in an asynchronous manner. Promises are objects that represent the return value or thrown exception that a function may eventually provide. Promises are incredibly useful in dealing with remote objects, and we can think of them as a proxy for our remote objects.

Instead of firing a function and hoping to get a callback run when executing asynchronous methods, promises offer a different abstraction: They return a promise object.

Why Promises?

Escaping from callback hell is just one by-product of using promises. The real point of promises is to make asynchronous functions look more like synchronous ones. With synchronous functions, we can capture both return values and exception values as expected.

The point of using promises is to regain the ability to do functional composition and error bubbling while maintaining the ability of the code to run asynchronouslyIn Angular, promises are created through the the $q service

When you execute something synchronously, you wait for it to finish before moving on to another task. When you execute something asynchronously, you can move on to another task before it finishes.

simple example 🙂

Synchronous Execution 

My boss is a busy man. He tells me to write the code. I tell him: Fine. I get started and he’s watching me like a vulture, standing behind me, off my shoulder. I’m like “Dude, WTF: why don’t you go and do something while I finish this?”

he’s like: “No, I’m waiting right here until you finish.” This is synchronous.

Asynchronous Execution

The boss tells me to do it, and rather than waiting right there for my work, the boss goes off and does other tasks. When I finish my job I simply report to my boss and say: “I’m DONE!” This is Asynchronous Execution.

It’s really that simple! Hope it helps





function sum(num) {  // Asyn Function
 var deferred = $q.defer();
 $timeout(function() {
  if (typeof(num == 'number')) {
    deferred.resolve(num + 2);
  } else {
    deferred.reject(num + ' is not a number');
 return deferred.promise;

 var promise = sum(5);
 promise.then(function(response) {
   console.log('True: ' + response);
 }, function(error) {

Promises give us a lot of flexibility when dealing asynchronous behavior

  • The $q service is the Angular implementation of Promise API
  •  Promises either get resolved or rejected
  • The ‘then’ method takes 2 arguments (both function values)
    1st – function to handle success or ‘resolve’ outcome
    2nd – function to handle error or ‘reject’ outcome
  • ‘then’ itself returns a Promise, so it chainable
  •  $q.all method allows us to execute multiple promises in parallel, handling success/failure in one central place




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s