How To Chain Nested Promises Containing Then And Catch Blocks?

How to chain ES6 nested Promises with each Promise in the nesting having then and catch blocks? For example, what will be the Promise then and catch blocks chaining implementatio

Solution 1:

If you want to chain promises, you can have each handler return a promise, and then chain the then and catch functions from there. I believe this demonstrates what you're looking to do:

constgetPromise = (time, reject=false) => newPromise((res, rej) => {
  setTimeout(() => reject ? rej() : res('done'), time);
});

getPromise(500)
  .then(() => {
    console.log('first response');
    returngetPromise(500, false);
  })
  .then(() => {
    console.log('second response');
    returngetPromise(500, true);
  })
  .catch((error) => {
    console.log('you can have catch statements return promises, too');
    returngetPromise(700, true)
  })
  .then(() => {
    // this structure falls down here; is this a response to the promise returned from// the catch, or the promise returned from the 'second response' part?console.log('third response');
  })
  .catch(() => {
    console.error('hit an error');
  });

However, it's important to realise that this is a chain with no branching logic. With the structure handle success -> handle error -> handle success, once your error handlers return valid promises, the remainder of the chain cannot tell whether what came before was a result of the success or error handlers. There's no branching logic here and you need nesting of promises to achieve that.

There are two main alternatives here. First you could throw different error types and handle each different error in a single catch handler. Second, you could use async/await syntax instead. Either may work for you but I think that they'd warrant a separate question.

Solution 2:

This can be written like this :

functionmakeAjaxCall(url){
    returnnewPromise((s, f) => {
        $.ajax({ 
            url: url, 
            success: s,
            error: f
        })
    })
}
makeAjaxCall('url1')
.then((data) => {
    console.log('URL1 call success');
    returnmakeAjaxCall('url2')
}, (error) => {
    console.log('URL1 call error');
    returnmakeAjaxCall('url3')
})
.then(() => {
    //It Could be Either url2 success or url3 success
}, () => {
    //It Could be Either url2 failure or url3 falure
})

Solution 3:

have you tried .done and .fail ?

You can re-write the code as below

constdoAjaxCall = (url) => $.ajax({ url })

constcallURL = (url) => doAjaxCall(url)
  .done(() =>console.log(`${url} is ok!`) )
  .fail(() =>console.log(`${url} failed!`) );

doAjaxCall('/url1')
.done(() => {
  console.log('url1 is ok!');
  callURL('/url2');
 })
.fail(callURL('url3'));

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>