Axios разблокирует сообщение об ошибке, когда сервер отправляет 422 в блоке try-catch

Question

Я использую axios для моего HTTP с Vue.js. Но когда я делаю ajax call, все идет хорошо, когда server отправляет обратно response data с 200 успехом.Но когда есть ошибки, server не выполняет catch bloc.Вот мой вызов ajax в Vue.js

export default{
    data(){
        return {
            form:{
                email:'',
                password:'',
                password_confirmation:'',
                fname:'',
                lname:'',
                city:''
            },
            formError:''
        }
    },
    methods:{
        //This should be a POST method through axios
        register:async function(){
           try{
               const res=await axios.post('api/register',this.form);
               console.log("Ba donnees : ",res.data);
           }catch(err){
               console.log("Erreeer",err.response);
           }
        }
    }
}

А вот мой контроллер регистра:

private function validateForm($data){
        return Validator::make($data,
        [
            'fname' => ['required', 'string','min:2' ,'max:255'],
            'lname' => ['required', 'string','min:2' ,'max:255'],
            // 'mname' => ['string','min:2' ,'max:255'],
            'company' => ['string','min:2' ,'max:255'],
            'title' => ['string','min:2' ,'max:255'],
            'phone_number' => ['string','min:13' ,'max:13'],
            'city' => ['required', 'string','min:2' ,'max:100'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed']
            // 'password_confirm'=>['required','string']
        ]
      )->validate();
    }
    //Register
    public function register(Request $request){
        $data=$this->validateForm($request->all());
        $data['password']=Hash::make($data['password']);
        $user=new User($data);
        $user->save();
        return response()->json($user);

    }

Когда все идет хорошо, я получаю ожидаемый результат от моего try, нов случае POST http://localhost:5000/api/register 422 (Unprocessable Entity) он пытается записать оператор в try.

Но когда я захожу на вкладку сети, я вижу возвращенную ошибку JSON, например,

{"message": "Указанные данные были недействительными.", "Errors": {"fname": ["Поле fname обязательно."], "Lname": ["Поле lname обязательно."], "city": ["Поле города обязательно."], "email": ["Поле адреса электронной почты обязательно."], "password": ["Поле пароля обязательно."]}}

Answer 1

Вы можете определить, когда ответ должен быть перехвачен с помощью свойства validateStatus, например:

axios.post('api/register', {
  validateStatus: function (status) {
    return status < 400; // Reject only if the status code is greater than or equal to 400
  }
})

Answer 2

Axios не отправляет исключение при возврате ошибки http, вместо этого следует использовать axios.catch:

axios
  .post('api/register',this.form);
  .then(res => { console.log("Ba donnees : ",res.data) })
  .catch(err => { console.log("Erreeer",err.response) });