Как я могу получить коды ошибок из ответа Vuex? - PullRequest
Новая
       5

Как я могу получить коды ошибок из ответа Vuex?

0 голосов
/ 14 марта 2020

Я пытаюсь обработать ошибки в моем приложении 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 компоненте выглядит так (обработчик события click): 

...

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 Store. vue

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

        ...

UserService. 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.

Я чувствую, что это действительно простая вещь, которую я делаю невероятно сложно. Спасибо за вашу помощь!

1 Ответ

2 голосов
/ 15 марта 2020

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