Chain multiple promises in Angularjs

Question

I have the following structure and need to simplify it,

Resuable service1 to interact with IndexedDB

function isDbExist (){
// do something , it return either reject or resolve
}

function createDB (){
// do something , it return either reject or resolve
}

function getData (){
    // do something , it return either reject or resolve
}

In another service2 I'm injecting this service1 and using the functions as such

function1 (){
service1.isDbExist.then(function(data){
   service1.createDB.then(function(data){
      service1.getData.then(function(data){
        referred.resolve(data);
      },function(error){
       deferred.reject(error)
      })
   },function(error){
    deferred.reject(error);
   })
},function(error){
   deferred.reject(error);
})
}

The problem here is the readability of the code is not good, its not easy to debug as which reject function is for which promise. Is their some good way of doing this ? I have read about $q.all but don't this its applicable in this situation.

juco · Accepted Answer · 2015-07-12 09:39:21Z

6

Exactly, the beauty of promises is that you can chain them as opposed to nesting them like callbacks. You can return another promise when dealing with the previous like so:

isDbExists().then(function(db) {
  // do something
  return createDb();
}).then(function(db) {
  // do something with with the resolved db..
  return getData();
}).then(function(data) {
  // Do something with data
}).catch(function(error) {
  // Uh oh, something went wrong. Deal with error
});

Finally, you deal with the error that may have occurred.

answered Jul 12, 2015 at 9:39

juco

6,3423 gold badges27 silver badges42 bronze badges

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

4 Comments

Gaurav_soni Over a year ago

can you explain why are you using return ?

juco Over a year ago

Returning a promise within the then() allows you chain promises in this way

juco Over a year ago

Because he's simply passing in the functions that return promises. Either approach is valid

Gaurav_soni Over a year ago

Was just implementing this solution , came up one more problem. I need to call a async function if one of the promises fail , after that promise succeeds i need to continue the normal execution. If not clear i can make a fiddle

dfsq · Accepted Answer · 2015-07-12 10:08:10Z

5

You can chain multiple promises like this:

service1.isDbExist()
    .then(service1.createDB)
    .then(service1.getData)
    .then(function() {
        // DB exists, created and data loaded
    })
    .catch(function(err) {
        console.log('Handle error', err); // isDbExist, createDB or getData rejected
    });

Check interactive demo to see how success and error data is passed to the next promise in chain and how you have full control over process on each step:

Demo: http://plnkr.co/edit/PM06e8NGJvHKmoJ9C2Lf?p=info

edited Jul 12, 2015 at 10:08

answered Jul 12, 2015 at 9:41

dfsq

193k26 gold badges244 silver badges261 bronze badges

7 Comments

Gaurav_soni Over a year ago

If the isDBExist is passing something in the resolve , how would i get that value in the .then(service1.createDB) ?

dfsq Over a year ago

What I wrote is equivalent to

service1.isDbExist().then(function(data) { return service1.createDB(data); }).then(function(data) { return service1.getData(data); })..

so you don't have to worry about passing data to the next then in chain.

Gaurav_soni Over a year ago

Yes, just worked , trying it out. Thanks. Will update you soon.

Gaurav_soni Over a year ago

Thanks for the example, I have a couple of questions now, 1. If isDbExist() is passing some data in resolve which needs to be passed to service1.createDB('pass something from isDBExist') , how to do this ? 2. The catch block only shows the error from the 1st promise , how to get the error data from other promises ?

juco Over a year ago

Your first question is answered in mine below. As for the error, the .catch() will be called when the any of 3 promises are rejected

|

Emil Ingerslev · Accepted Answer · 2015-07-12 09:42:36Z

0

One of the really great things about promises is that they can be chained like this:

function1 (){
  return service1.isDbExist.then(function(exists){
    if(!exists) return service1.createDB()
  })
  .then(function() {
    return service1.getData('some', 'args')
  });
}

Remember that the .then will receive the result of the previous function, like the exists would be a boolean. function1 will also return a promise and this promise will return the resolved/rejected promise from service1.getData.

answered Jul 12, 2015 at 9:42

Emil Ingerslev

4,8152 gold badges26 silver badges18 bronze badges

Collectives™ on Stack Overflow

Chain multiple promises in Angularjs

3 Answers 3

4 Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related