Axios interceptor - error not returned to "then" method

Question

I call an api method, and when the response is 500 server error, the axios interceptor function starts, and returns Promise.reject(error);

But it stops there so the "then" function never runs. Instead it becomes "Uncaught":

Uncaught (in promise) Error: Request failed with status code 500

Shouldn't the interceptor return the error to the function which made the api call, and then I can handle the error there?

Here is code:

    //on submitting form
    onSubmit(data){

           //call api function
          api.sendPayment(data).then(response => {

                //this never runs
                 alert('response!')
                console.log(JSON.stringify(response))
            }    


    });


//Api function
sendPayment: (formData) => {

        return axios.post('/api/checkout', formData);
    },

//interceptor

axios.interceptors.response.use(response => {
    return response;
}, error => {

    //this executes the "uncaught" error instead of returning to the "then" function.
    return  Promise.reject(error);
});

Answer 1

You need to use the .catch. Error won't caught in .then

api.sendPayment(data).then(response => {
    //this never runs
        alert('response!')
    console.log(JSON.stringify(response))
}).catch(err => {
    //Handle your error here
    console.log(err.response);
})