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()
})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()
})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)
A .catch chained onto a Promise will result in a Promise that:
.catch, if the .catch returns normally.catch itself throws an errorSo
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);
})