I have an asynchronous function that is called at the beginning of my code, and only when it is done further things can happen. It would typically be something like

const initialCheck = () => {
  return fetch('https://reqres.in/api/users')
    .then(r => {
      // do things
      return r
    })
}

const actualStuff = () => {
  console.log('hello')
}

initialCheck()
  .then(r => {
    actualStuff()
  })

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

The goal of this initial check is to make sure that the HTTP endpoint (https://reqres.in/api/users) is actually reachable. It should therefore account for a connection issue and my solution was to catch() the possible error:

const initialCheck = () => {
  return fetch('https://thissitedoesnotexistihopeatleast')
    .then(r => {
      // do things when the endpoint is available
      return r
    })
    .catch(err => {
    // do something when the endpoint is not availble
    // nothing is returned
    })
}

const actualStuff = () => {
  console.log('hello')
}

initialCheck()
  .then(r => {
    actualStuff()
  })

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

My question: why does the code above work?

catch() is executed (and the then() in that unction is not), it does not return anything, and despite that .then(r => {actualStuff()}) outputs what is expected (hello on the console).

What does that then() actually receives? (that I do not return)

CodePudding user response：

A .catch chained onto a Promise will result in a Promise that:

• resolves with the value returned from the .catch, if the .catch returns normally
• rejects with the error, if the .catch itself throws an error

So

const chainedPromise = somePromise.catch(() => {
  // no errors here
  // nothing returned
})

If the .catch definitely doesn't throw, then chainedPromise will definitely resolve (and not reject), and since nothing is returned, the chainedPromise will resolve to undefined.

So

initialCheck()
  .then(r => {
    actualStuff()
  })

works because initialCheck returns a Promise that resolves (to undefined).

If you returned something from the .catch, and the .catch was entered into, you'd see it onto .thens chained onto it later:

const initialCheck = () => {
  return fetch('https://doesnotexist')
    .catch(() => {
      return 'foo';
    });
}

const actualStuff = (r) => {
console.log(r);
  console.log('r is foo:', r === 'foo')
}

initialCheck()
  .then(r => {
    actualStuff(r);
  })

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>