时间戳

首页 > 解决方案 > (VueJS, Axios) 捕获错误的不同方法

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

问题描述

我目前正在构建基于 Laravel 和 VueJS 的单页应用程序。
有没有比我的更好的方法来处理 axios 的错误？

当用户单击登录按钮时，我目前是这样做的：

VueTemplae：

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

api路线：

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');
}

不幸的是，抛出异常总是会将内部服务器错误打印到控制台中。
如果我返回异常以外的其他内容，则 axios 始终执行then().
有什么方法可以防止这种情况或更好的方法来处理 axios 响应？

谢谢！

标签： laravelvue.jsauthenticationaxios

解决方案

您的 API 需要返回带有 4XX 状态代码的响应，以便在您的 Vue 组件中触发 catch 块。

示例：在 API 端捕获错误后，发送带有状态码的响应400 Bad Request。它的格式将与您成功的登录响应类似，但带有错误消息和 400 状态代码而不是 200。

推荐阅读