Both then and catch executing in same call

[dmt0]

I'm doing this call:

axios.get('/groups', {
  baseURL: 'http://localhost:5000',
  headers: { Authorization: 'Bearer ' + getAccessToken(),  'Content-Type': 'application/json; charset=utf-8' }
})
  .then((response) => {
    console.log('then response',response)
    success(response.data)} )
  .catch((response) => {
    console.log('catch response',response)
    error(response.status, response.data.description)})

I'm calling this exactly once. I get a 200 OK response, then block executes, with response being an object I would normally expect. Right after that catch executes, response being a string:

TypeError: Cannot read property 'groups' of null(…)

Closing: my bad, it was an error somewhere very far in the code, still trying to figure out how it made it into the promise...

[nilaybrahmbhatt]

I have the same error. Both then and catch executing in same call

[shin-monkey]

I am also getting this error. Is there an explanation for this?

[dmt0]

Basically it has to do with how promises works:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/throw

The throw statement throws a user-defined exception. Execution of the current function will stop (the statements after throw won't be executed), and control will be passed to the first catch block in the call stack. If no catch block exists among caller functions, the program will terminate.

[tomasswood]

I had the same issue and mine was to do with having .catch before .then. Whoops.

[greenzeal]

tomasswood this should not be the case actually.
const doRefreshToken = () => {
return new Promise(
function (resolve, reject){
if (success){
resolve(success)
}else{
reject(error)
}
})
}

so actually there is no any difference if write .catch first or .then

[dengunya]

@greenzeal there is difference. this is strange, but the order does matter.
I wanted to use smth like
var func = () => axios.post(....).catch();
to implement error handling before calling this async function.
func().then(...)
But in this case "then" callback fires on error (ex. 404 status) and "catch" cb is ignored.

[greenzeal]

Yes, I was mistaken, there is a order in promises. First to use .then after .catch

[dacastro4]

This just happens to me and my problem was (correct me if I'm wrong) that any kind of error you have inside the then() callback it will be caught by the "catch" callback.

Example:

axios.get(url)
    .then( data => {
        //some sort of error
    })
    .catch(error => {
        /it's gonna fall here. If you console log "error" is gonna be the error that happened in the then callback 
    })

[Jam0r85]

@dacastro4 THANK YOU! Was pulling my hair out trying to figure out why my request kept catching when it was successful. Re-read through my .then and found a bug 👍

[sachintbits]

@dacastro4 Thank you, my error was in the then execution. Fixed the error in the function that was called by the then statement and the problem was resolved.

[LuckyLam34]

@dacastro4 Thank you so much, you're the man!

[zmechanic]

My problem was that I didn't need result in then, it was highlighted as unused, so in a hurry I removed it to and got the following:

    this.processDropFromPalette(data.component, data.dataTransfer.items)
        .then(this.setState(state => {
            data.component.isChanging = 1;
            return { connectedComponents: state.connectedComponents };
        }))
        .catch(reason => {
            this.ctx.publish(new Message.ShowErrorMessage(reason));
        });

And instead of being a lambda func declaration in .then it become a direct function call, so this.setState() was called as soon as this.processDropFromPalette returned, without waiting for resolve().

[mohit61]

thanks.

[Tony-Ndichu]

This just happens to me and my problem was (correct me if I'm wrong) that any kind of error you have inside the then() callback it will be caught by the "catch" callback.

Example:

axios.get(url)
    .then( data => {
        //some sort of error
    })
    .catch(error => {
        /it's gonna fall here. If you console log "error" is gonna be the error that happened in the then callback 
    })

I see several people have given a thumb's up to @dacastro4 's comment, could anyone please care to explain how his comment helped you guys with your specific situations? Am looking at the answer but I don't understand how to use it to prevent my .then and .catch both from executing at the same time.

[gabrieljcandia]

This just happens to me and my problem was (correct me if I'm wrong) that any kind of error you have inside the then() callback it will be caught by the "catch" callback.
Example:

axios.get(url)
    .then( data => {
        //some sort of error
    })
    .catch(error => {
        /it's gonna fall here. If you console log "error" is gonna be the error that happened in the then callback 
    })

I see several people have given a thumb's up to @dacastro4 's comment, could anyone please care to explain how his comment helped you guys with your specific situations? Am looking at the answer but I don't understand how to use it to prevent my .then and .catch both from executing at the same time.

I think it means that what could be happening, is that maybe there's an error in the "then" block, for what the "catch" block is being excecuted, and that being the reason why both blocks get excecuted. If that is true, doing console.log(error) in the "catch" block should show details. In my case that helped solve the problem.