Получение текста ошибки laravel + vue3

Question

Всем привет , пишу авторизацию , есть валидация и если валидация не прошла у меня возвращается 422 статус и сообщение об ошибке try {


        $credentials = $request->validate([
            'username' => 'required|string',
            'password' => 'required|string',
        ]);
    } catch (ValidationException $e) {

        return response()->json(['status'=>422,'message'=>'error auth','data'=>[]],422);
    }

и уже на vue я хочу вывести сообщение в консоль " error auth" , но у меня получается ошибка "Ошибка при отправке запроса TypeError: Cannot read properties of undefined (reading 'data')" вот код на vue

login() {
            axios.get('/sanctum/csrf-cookie')
                .then(response => {
                    axios.post('/login', {
                        username: this.username,
                        password: this.password
                    })
                        .then(res => {
                            console.log(res.data);
                            localStorage.setItem('x-xsrf-token', res.config.headers['X-XSRF-TOKEN'])
                            this.$router.push({ name: 'personal' })
                        })
                        .catch(e => {
                            console.log('Ошибка при отправке запроса',e);
                                this.errors = 'Ошибка авторизации';
                        });

                })
        }

ничего не получается , но если убрать в контроллере статус кода и он по дефолту будет приходить как 200 , то ошибка будет выводиться , просто статус будет 200 , а не тот , который я хочу указать . Кто знает как вывести ошибку и статус код был тот который я указываю в контроллере? Спасибо

Answer 1

Дело в том, что типы статусов 400 и 500 расцениваются как ошибка. Они и называются клиентские и серверные ошибки. Поэтому их надо отлавливать в catch и заниматья обработкой этих статусов там.

.catch((err) => {
    console.log(err);   
});

В err будет информация и по code и response.status и прочее

Статусы 200, которые говорят, что запрос выпонился успешно - в then

Чтобы по тысяче раз не писать then, catch - самое оптимальное будет создать единый обработчик запросов и статусов и использовать его

Answer 2

Ответы сервера со статусами 4ХХ и 5ХХ обрабатываются axios в блоке catch. Для обработки ошибок валидации я использую следующий код, который создает уведомление для пользователя:

.catch((error) => {     
  if (error.response.status === 422){
    var errors = error.response.data.errors;
    for(const key in errors){          
      var err = errors[key]
      for (var e in err){
        //вывод ошибки пользователю
        this.$toast.error(err[e], {
          timeout: 0,
        })
       }
     }
   }
  //обработка других ошибок
}

БЛОГ НА HUSL

Получение текста ошибки laravel + vue3

Ответы (2 шт):