Ajax-запросы с Laravel и Axios — ошибки 422 и 419

Как получить ответ валидации Laravel и ошибки валидации с помощью axios
Недавно решил оптимизировать запросы, убрать полностью с сайта jQuery и перейти на axios.

Все бы ничего, удаление и добавление записис рпошло норм. А вот с валидацией наступила полная засада. Просто не возвращался reject а красным куча ошибок в консоли. Порыл интернет и вот что нашел:

При обработке запросов ajax с помощью Laravel часто возникают две ошибки: 419 и 422.

Код 419 говорит о том, что у вас отсутствует csrf token.
Чтобы решить эту проблему, просто поместите это в свой head:

1
<meta name="csrf-token" content="{{ csrf_token() }}" />
И передайте его с каждым запросом, который вы отправляете в Laravel. (Для маршрутов в web.php файле) Если вы используете axios, вы можете либо добавить его в свою глобальную конфигурацию axios:

1
axios.defaults.headers = {
2
 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
3
},
Или укажите при создании экземпляра axios:

1
const instance = axios.create({
2
 headers: {
3
   'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
4
 },
5
});
Ошибка axios 422 Unprocessable Entity решение
Эта ошибка возникает при сбое проверки со стороны сервера. Если вы попросите Laravel обновить вашу страницу после POST запроса, вы получите ошибки в @errors директиве и прочем, но обычно эти запросы и ответы идут через ajax либо потому, что так удобнее пользователям, либо вы используете фреймворк, ​​​​как React или Vue.

Вот как вы можете решить 422 Unprocessable Entity проблему axios.

Предположим, вы проверяете свою форму с помощью полей ввода электронной почты и пароля:

1
$request->validate([
2
 'email' => 'required|min:4',
3
 'password' => 'required|min:9'
4
]);
Поскольку axios — это библиотека на основе Promise, вы можете отлавливать ошибки в catch блоках. Однако проблема в том, что даже если вы добавите блок catch после вашего then, это не поможет вам получить информацию об ошибке в вашем браузере. При попытке его логировать вы скорее всего получите что-то вроде этого вместо аккуратного json с ошибками:

К счастью, решение простое. Когда вы получаете доступ к данным об ошибках, используйте error.response вместо этого error в своем блоке catch следующим образом:

01
axios
02
 .post(endpoint, body, headers)
03
 .then(response => {
04
   // Do fancy stuff
05
 })
06
 .catch(error => {
07
   console.log(error.reponse); // logs an object to the console
08

09
   // Do something with error data
10
 });
Здесь error.response объект с несколькими полезными свойствами, такими как status, statusText и data.

Последнее то, что мы ищем. Там можно найти message свойство с общим описанием и errors объект с подробными ошибками проверки.

В error.response.data.errors объекте ключами являются входные имена, а значениями являются массивы(!) строк, описывающих ошибки.

Теперь давайте сделаем еще один шаг и воспользуемся некоторыми интересными функциями, предоставляемыми axios. Axios дает нам возможность добавлять перехватчики к нашим запросам и ответам. Это позволяет нам последовательно изменять запросы и ответы и придерживаться принципа DRY.

Если вы не знакомы с концепцией перехватчиков, вы можете думать об этом следующим образом:

Для запросов они изменяют данные вашего запроса перед отправкой на сервер,
Для ответов они изменяют ответ перед всеми вашими блоками then и .catch
Если вы хотите узнать больше, ознакомьтесь с документацией axios по этой теме.

Используя перехватчики, мы можем добавить дополнительный слой:

1
instance.interceptors.response.use(
2
 response => response,
3
 error => Promise.reject(error.response)
4
);
Обратите внимание, что мы пересылаем как обычный ответ, так и сообщение об ошибке.

Вот мой финальный код
01
async function postData(_url, query) {
02
   let _token = <strong><em>document</em></strong>.querySelector('meta[name="csrf-token"]').content;
03

04
   return await axios.post(_url, query, {
05
       headers: {
06
           'Content-Type': 'application/json',
07
           'X-CSRF-TOKEN': _token,
08
           'X-Requested-With': 'XMLHttpRequest',
09
       }
10
   }).then(response => {
11
       // console.log(response.data)
12
       return response.data;
13
   }).catch(error => {
14
       // console.log(error.response);
15
       return error.response;
16
   });
17

18
}
А вызываю его вот так:
просмотреть источникраспечатать?
01
const args = JSON.stringify({
02
             title: title,
03
             description: description,
04
             location: location,
05
             phone: phone,
06
             email: email,
07
             website: website           
08
         });
09

10
const query = await postData(_url, args);
И в основном это все!

Если вам есть что добавить, нашли ошибку или просто хотите поболтать, свяжитесь со мной в комментах или напишите по электронной почте 🙂https://wikicode.ru/https://wikicode.ru/https://wikicode.ru/https://wikicode.ru/Недавно решил оптимизировать запросы, убрать полностью с сайта jQuery и перейти на axios.

Все бы ничего, удаление и добавление записис рпошло норм. А вот с валидацией наступила полная засада. Просто не возвращался reject а красным куча ошибок в консоли. Порыл интернет и вот что нашел:

При обработке запросов ajax с помощью Laravel часто возникают две ошибки: 419 и 422.