How to chain .then functions and callback success function in Angular.js

Question

I'm trying to chain nested .then functions and call the success functions, but call back is calling in the starting itself.

//public method fn
function fn(callback) {
//calling the 1st API request
fn1()
  .then(function(response) {
    //2nd API request function
    call1(response);
  }, function(error) {
    return $q.reject({
    responseStatus: error.status
  });

  })
  // Returning response
  .then(function(response) {
    callback({
    responseStatus: 200
    });
  }, function(error) {
    callback({
      responseStatus: 500
    });
  });
}

function call1(response) {
  //2nd API
  fn2()
    .then(function(response) {
     //3rd API request function
        call2(response);
      }, function(error) {
        return $q.reject({
        responseStatus: error.status
      });
    });
}


function call2(response) {
  //3rd API request 
  fn3()
    .then(function(response) {
        return lastfunction();
      //here i need to callback the success  response status
      }, function(error) {
        return $q.reject({
        responseStatus: error.status
      });
    });
}


function fn1(){
 //some code 
 }
function fn2(){
//some code 
}
function fn3(){
//some code 
}

//Controller

//i will show response status callback here

if(response.status ==200){
  show output;
 }
 else{
  //response 500
  show errors;
  }

Basically i need to callback "200" response status to other controller on all service calls are successful and even if one request is failed i need to sent "500". with my code 'response status '200' is calling with the first .then function itself. I want to call this service calls as que

Any help would be appreciated.

score 6 · Accepted Answer · edited May 23 '17 at 12:17

Your { responseStatus: x } object exists solely for the purpose of flow control, which can be provided naturally by the success path and error path of a promise returned by fn();

Also, with promises, there's no need to pass a callback to fn() - indeed it is considered bad practice to do so.

So first,

purge callback all through
return a promise from each low level function
simplify success chaining
purge unnecessary error handlers

function fn() {
    return fn1().then(call1);
}
function call1() {
    return fn2().then(call2);
}
function call2() {
    return fn3().then(lastfunction);
}
function fn1() {
    //some code that returns a promise
}
function fn2() {
    //some code that returns a promise
}
function fn3() {
    //some code that returns a promise
}

Then, call as follows :

fn().then(function(response) {
    // success callback (your "200" condition)
    // show output;
}).catch(function(error) {
    // error callback (your "500" condition)
    // show error;
});

The response var will be whatever lastfunction() delivered. You have an issue if you want response to be some aggregation of what is delivered by fn1(), fn2(), fn3() that is not already delivered by lastfunction(). That issue is comprehensively addressed here.

The error var will be the first Error to occur in the course of executing fn(), with no loss of information; error.message and error.status (if it exists) can be read/displayed.

But if at all my response is failed in call2 function, error callback is not called right with this approach. — rUI7999, May 12 '16 at 11:14
By returning promises from the low level functions, error states naturally propagate upwards. Therefore wherever an error occurs, `call2()` or elsewhere, it will end up in the error handler. — Roamer-1888, May 12 '16 at 11:22
@rUI7999 What exactly don't you like about what happens if there's a failure in call2()? — Peter, Apr 22 '18 at 15:24
@Roamer-1888 Can this pattern be condensed so that only N functions are required instead of N _pairs_ of functions? Do we really need _both_ fn2() and call2(), for example? — Peter, Apr 22 '18 at 15:49

score 2 · Answer 2 · answered May 12 '16 at 05:28

You need to return the promises you create in order to chain them properly. Keep in mind when you use .then() you aren't modifying a promise, you're constructing a new one in the chain.

Your code with promises returned (formatting mine):

function fn(callback) {
  return fn1()
    .then(function(response) {
      return call1(response);
    }, function(error) {
      return $q.reject({
      responseStatus: error.status
    });

    })
    // Return response
    .then(function(response) {
      callback({
        responseStatus: 200
      });
    }, function(error) {
      callback({
        responseStatus: 500
      });
    });
}

function call1(response) {
  return fn2()
    .then(function(response) {
        return call2(response);
      }, function(error) {
        return $q.reject({
        responseStatus: error.status
      });
    });
}


function call2(response) {
  return fn3()
    .then(function(response) {
        return lastfunction();
      //here i need to callback the success  response status
      }, function(error) {
        return $q.reject({
        responseStatus: error.status
      });
    });
}


function fn1(){
 //some code 
 }
function fn2(){
//some code 
}
function fn3(){
//some code 
}

Thanks for the reply! Yes, i'm chaining them properly in order but i need to show the response status of the callback on success and errors — rUI7999, May 12 '16 at 05:34
@rip1699 are you saying this code doesn't fix the issue? What is the behavior you seeing when you use it? — Paarth, May 12 '16 at 05:37
same behavior, i just forgot to mention return statements in the code. Basically response is calling after 1st function itself — rUI7999, May 12 '16 at 05:42

How to chain .then functions and callback success function in Angular.js

2 Answers2

Linked