Axios HTTP call is always treated as succeed

Question

So I'm trying for multiple ways to get error response status from my axios HTTP call and something weird is happening.

        getData() {
            axios.get(`/api/article/getObserved.php`, axiosConfig)
                .then(response => {
                    console.log('success');
                    console.log(response);
                })
                .catch(err => {
                    console.log('error');
                    console.log(err.status);
                    console.log(err.response.status)
                });
        }

So I'm calling my getObserved endpoint and although it's returning http_response_code(503); it's going to .then() part because it console log 'success' string.

this is output from console:

GET http://localhost/obiezaca/v2/api/article/getObserved.php 503 (Service Unavailable)

success favouriteArticles.vue?31bd:83

I've done hundreds of calls like this and this .catch was always catching error even tho I'm not throwing exception like in other lenguages I would do. However I also tried like this:

        getData() {
            axios.get(`/api/article/getObserved.php`, axiosConfig)
                .then(response => {
                    console.log('success');
                    console.log(response);
                }, function (err) {
                    console.log('error');
                    console.log(err.status);
                    console.log(err.response.status);
                })
                .catch(err => {
                    console.log('error');
                    console.log(err.status);
                    console.log(err.response.status)
                });
        }

But it still doesn't console 'error' although I have this 503 bad request returned from my endpoint. Why?

---

I also would like to add that I dont think my endpoint is not working correctly because I was testing it with tests and manually by cURL and POSTMAN and everything was fine.

---

Edit since response is undefined when I don't get data from my endpoint and I need to handle only one error (there is data or not) I have just do something like this:

        getData() {
            axios.get(`/api/article/getObserved.php`, axiosConfig)
                .then(response => {
                    if(response) {
                        this.articles = response.data.records;
                    } else {
                        this.noFavourite = true;
                        this.articles = [];
                    }
                });

and it's working. I'll pray to not get into same issue with some call where I'll need to handle several different errors.

Answer 1

This issue was related to my httpInterceptor

import axios from 'axios';
import { store } from '../store/store';

export default function execute() {
    axios.interceptors.request.use(function(config) {
        const token = store.state.token;
        if(token) {
            config.headers.Authorization = `Bearer ${token}`;
            //console.log(config);
            return config;
        } else {
            return config;
        }
    }, function(err) {
        return Promise.reject(err);
    });
    axios.interceptors.response.use((response) => {
        return response;
    }, (err) => {
        console.log(err.response.status)
        return Promise.reject(err); // i didn't have this line before
    });
}

which wasn't returning promise on error response so after in promise of http call it somehow treated it as success. After adding return Promise.reject(err); inside my interceptor it's working fine