如何从 Vuex 响应中获取错误状态代码？

Question

我正在尝试处理 Laravel/Vue 应用程序中的错误。据我所知，我已经准备好了一切，因为我看到了我的期望。但是，如果响应不是200.

console.log('status: ', response.status); // 200

如果响应是400（或 200 以外的任何响应），我将无法阅读。

console.log('status: ', response.status); // undefined

这是我在控制器中为响应创建的内容：

控制器.php

...

if ($exception->getCode() === 400) {
    return response()->json(['errors' =>
        [
            'title' => 'Bad Request',
            'detail' => 'The username or password you have entered is invalid',
        ],
    ], $exception->getCode());
}

在网络选项卡中，响应被赶回来400，和响应对象看起来像这样：

{"errors":{"title":"Bad Request","detail":"The username or password you have entered is invalid"}}

惊人的！

我的 Vue 组件中的请求如下所示（单击事件处理程序）：

...

try {
    await this.$store.dispatch("user/signInWithEmailAndPassword", this.form)
        .then(response => {
            console.log('status: ', response.status);

                switch (response.status) {
                    case 200:
                        console.log('good to go!');
                        break;
                    case 400:
                        console.log('400 error');  // not getting here
                        break;
                    case 401:
                        console.log('401 error');  // or here
                        break;
                    default:
                        console.log('some other error');  // end up here all the time
                        break;
                    }
        })
        .catch(error => {
            console.log('SignInForm.authenticate error: ', error);
        });
} catch (error) {
    console.log("SignInForm.handleSubmit catch error:", error);
}

在我的 Vuex 商店中，我只是从我的服务返回响应，看看我得到了什么：

Vuex 商店.vue

return await UserService.signInWithEmailAndPassword(credentials)
        .then(response => {
            return response;

        ...

用户服务.vue

...

return await client.post('/v1/login', credentials)
    .then(response => {
        return response;
    })
    .catch(function (error) {
        console.log('UserService.signInWithEmailAndPassword error: ', error); // getting here
        return error;
    });

到目前为止，我唯一的运气是在我的控制台中看到这个：

UserService.signInWithEmailAndPassword 错误：错误：请求失败，状态码为 400

如何读取400错误代码以显示我真正想要的错误？似乎所有的碎片都在那里。我没有正确处理错误响应。感谢您的任何建议！

编辑

我已经更新了我的代码以反映您的建议，并且我相信这是因为我没有UserService正确回复我的电话。这是我现在正在做的事情：

return await client.post('/v1/login', credentials)
        .then(user => {
            console.log('user: ', user);

            return user;
        })
        .catch(function (error) {
            console.log('error: ', error);

            return error;
        });

当我提供无效的 un/pw 时，我陷入困境，并看到以下error消息：

错误：错误：请求失败，状态码为 400

不过，我未能正确归还它。如在，调用此方法的代码总是.then在.catch块中而不是在块中结束。

我觉得这是一件非常简单的事情，但我却做得非常困难。感谢您的帮助！

Answer 1

then当状态为： 时调用status >= 200 && status < 300。在catch方法中捕获错误。上面的代码应该改成这样：

try {
    await this.$store.dispatch("user/signInWithEmailAndPassword", this.form)
        .then(response => {
            console.log('status: ', response.status);
            console.log('good to go!');
        })
        .catch(error => {
                switch (error.response.status) {
                    case 400:
                        console.log('400 error');  // not getting here
                        break;
                    case 401:
                        console.log('401 error');  // or here
                        break;
                    default:
                        console.log('some other error');  // end up here all the time
                        break;
                    }

            console.log('SignInForm.authenticate error: ', error);
        });
} catch (error) {
    console.log("SignInForm.handleSubmit catch error:", error);
}

当然你可以破坏错误，直接得到响应

.catch(({ response }) => {
                switch (response.status) {

更新

您还应该正确地从服务返回错误：

return await client.post('/v1/login', credentials)
        .then(user => {
            console.log('user: ', user);

            return user;
        })
        .catch(function (error) {
            console.log('error: ', error);

            return Promise.reject(error);
        });