JS - Why don't I need return in nested then blocks

I'm making some API calls that need to happen in sequence (one after the other, and the previous must be complete before the next one)

I just refactored some code to get rid of some bad looking nested then calls.

(simplified examples here - any is just for example, and I do actually use responseOne, responseTwo and responseThree)

So went from this:

axios.get('https://example.com', {})
  .then(function (responseOne: any) {
    axios.post('https://example.com', {}, {})
      .then(function (responseTwo: any) {
        axios.put('https://example.com', {}, {})
          .then(function (responseThree: any) {
            axios.post('https://example.com', {}, {})
              .then(function () {
                reply.send
              })
          })
      })
  })

to

axios.get('https://example.com', {})
  .then(function (responseOne: any) {
    return axios.post('https://example.com', {}, {})
  }).then(function (responseTwo: any) {
    return axios.put('https://example.com', {}, {})
  }).then(function (responseThree: any) {
    return axios.post('https://example.com', {}, {})
  }).then(function () {
    reply.send
  })

The bit I don't understand is why I had to add returns in the second approach, but not the nested.

You have to call then on the promise you want to wait to settle.

In each case, that promise is the return value of axios.post().

In your first example, you access that return value directly.

In your second example, you have to return the promise so that it will be adopted by the next then in sequence. If you didn't do that, this would happen:

make_first_promise().then(() => {
    make_second_promise();
}).then(() => {
    // The previous `then` resolves with `undefined` **before** the second promise has resolved
});

Because the second approach chains the calls to .then(), so each one needs to return a Promise to keep that chain going.

In the original code no such chaining was taking place, and each nested operation was simply waiting for its own Promise to finish before invoking the next operation. It didn't matter for any given operation if the next one was also going to be a Promise or even if the previous one was a Promise.

Consider the following three scenarios:

1. Each then method call returns a promise. If the callback function passed to the then method returns nothing, the promise of the then method is fulfilled with the value of undefined.

   If the callback function contains some asynchronous operation, then the promise returned by the then method won't wait for the asynchronous operation to complete. The code inside the callback will get executed and the promise returned by the then method will fulfil with the undefined value as soon as its callback execution ends.

2. If the callback function returns a non-promise value, the promise returned by the then method fulfils with that value.

3. If the callback functions returns a promise, then the promise of the then method is resolved to the promise returned by the callback function. In simple words, this means that the outer then method promise (let's call it p1) now depends on the inner callback function promise (let's call it p2). If p2 fulfils, p1 also fulfils with the same value. If p2 is rejected, p1 also gets rejected with the same rejection value.

   In other words, p1 will wait for p2 to settle and p1 won't settle until p2 settles. This is generally what we want when the callback of the then method contains an asynchronous operation.

In your case, if you don't return the result of axios.post(...), then the first scenario applies. In this case, the callback function of the next then method call will be passed undefined as a parameter. However, in your case, this is not important. What's important is that the then method promise won't wait for the inner promise (returned by the callback function) to settle. This is not what you want.

What you want is for each then method to wait for the HTTP request in its callback function to complete before next then method's callback is invoked. To achieve this, you need to return the result of axios.post(...) so that your code falls under the 3rd scenario mentioned above.