(VueJS, Axios) 捕获错误的不同方法

Question

I'm currently building a single page application based on Laravel and VueJS.
Is there any better way then mine to handle errors with axios?

This is how I currently do it when a user clicks on login button:

VueTemplae:

methods : {
    authenticateUser() {
        axios.post('/api/login', this.form).then(() => {
            this.$router.push({name : 'home'});
        }).catch((error) => {
            this.error = error.response.data.message;
        });
    }
}

Api route:

public function login() {
    try {
        // do validation
    } catch(Exception) {
        // validation failed
        throw new Exception('login.failed');
    }

    // manually authentication
    if(Auth::attempt(request()->only('email', 'password'))) {
        return response()->json(Auth::user(), 200);
    }

    // something else went wrong
    throw new Exception('login.failed');
}

Unfortunately, throwing an exception always prints an internal server error into the console.
If I return something else than an exception, axios always executes then() .
Is there any way to prevent this or a better way to handle axios responses?

Thank you!

Answer 1

Your API needs to return a response with a 4XX status code in order for the catch block to fire in your Vue component.

Example: After you catch the error on the API side, send a response with status code 400 Bad Request . It will be formatted similarly to your successful login response, but with an error message and 400 status code instead of 200.