When do nested promises need to be returned?

Question

When chaining multiple then statements, I'm struggling to understand when I need to return a value to the next then statement vs when it's automatically passed down. The confusion (for me) is when I have a promise inside a then statement vs not.

This is in a node environment - an express app (more specifically, a Firebase Function triggered by a HTTP request) - so I'll ultimately res.send() some value.

// Do I need to return mainFunction()?
mainFunction()
  .then(resultOfMyFunction => {
    // I want the next "then" to wait for the response from this block
    // Do I have to return asyncFunction() or just the value below?
    asyncFunction().then(resultOfPromise => {
      // Do I return resultOfPromise?
    }).catch(error => {
      // If I return this error, will it go to the mainFunction catch block?
      return error
    })
  }).then(resultOfPromise => {
    // This is blocking, so the next "then" should wait for the value
    return synchronousFunction(resultOfPromise)
  }).then(resultOfSynchronousFunction => {
    // End of function - do I need to return resultOfSynchronousFunction?
  }).catch(error => {
    // Do I need to return error?
  })

I know we shouldn't nest promises, but Firebase doesn't really give us an option when you need to chain multiple, different database calls where each call is a promise and you need to wait for data from one to call the next.

Answer 1

The confusion (for me) is when I have a promise inside a then statement vs not.

Whenever you have a promise inside a then or an async function you must return to it. Otherwise rejections (thrown errors in async functions and promises) get swallowed and end up in the global hook without giving a chance to whomever is calling your code to handle the error.

Synchronous functions have no such limitation - returning a synchronous code only matters if you want to reuse its return value since thrown errors are handled by the then automatically.

  // If I return this error, will it go to the mainFunction catch block?

Promises are really quite non-magical. The return value is how the error/success (rejected/fulfilled) state is propagated between calls so if you don't return the value - mainFunction won't go to its catch block.

If you want it to go to its catch block - the return value needs to be a promise that eventually rejects - for that you need to either rethrow the error in the inner .catch block or remove the .catch from there altogether.

Answer 2

You don't really need the anonymous functions in the first two then()

You can do it by passing function references to then() instead

mainFunction()
  .then(asyncFunction)
  .then(synchronousFunction)
  .then(resultOfSynchronousFunction => {
    // consume resultOfSynchronousFunction or return to next then()
  }).catch(error => {
    // Do I need to return error?
    // only if this is not final catch block
  })

Answer 3

I think you want something like this. I'm presuming that by This is blocking you mean synchronousFunction is not async. In which case it does not need to be consumed in a promise like fashion.

mainFunction()
  .then(resultOfMyFunction => {
    //return promise from async function
    return asyncFunction();
  })
  .then(resultOfPromise => {
    let resultOfSynchronousFunction = synchronousFunction(resultOfPromise);
    // End of function
  })
  .catch(error => {
    // Do I need to return error?
  });

if you want to return resultOfSynchronousFunction then you should read How do I return the response from an asynchronous call?

If you want to return an async version of synchronousFunction you'll need to wrap this in a promise:

mainFunction()
  .then(resultOfMyFunction => {
    //return promise from async function
    return asyncFunction();
  })
  .then(resultOfPromise => {
    return new Promise((resolve, reject) => {
       let resultOfSynchronousFunction = synchronousFunction(resultOfPromise);
       // End of function
       resolve(resultOfSynchronousFunction);
    });
  })
  .then(resultOfSynchronousFunction => {})
  .catch(error => {
    // Do I need to return error?
  });

If you want to run another async call after synchronousFunction a better pattern would be:

mainFunction()
  .then(resultOfMyFunction => {
    //return promise from async function
    return asyncFunction();
  })
  .then(resultOfPromise => {

       let resultOfSynchronousFunction = synchronousFunction(resultOfPromise);
       // End of function
       return anotherAsyncCall(resultOfSynchronousFunction );
  })
  .then(resultOfanotherAsyncCall => {})
  .catch(error => {
    // Do I need to return error?
  });