Блог

Я пытаюсь обработать 422 ответа от моего API на случай, если данные неверны при выполнении асинхронного вызова Axios.

В компоненте у меня есть такой метод, как:

 async saveChanges() {
  this.isSaving = true;

  await this.$store.dispatch('updateSettings', this.formData);

  this.isSaving = false;
}
 

И в моих действиях, подобных этому:

 let response;
try {
  response = await axios.put('/api/settings', settings);
  console.log(response);
} catch (e) {
  console.log('error');
  console.log(e);
}
 

Если запрос выполнен успешно, все работает нормально, и я получаю ответ. Однако, если код состояния ответа равен 422, он не завершается ошибкой или не генерирует исключение, и ответ пуст. Я пробовал .then(()).catch(()) , но тоже безуспешно, так как мне нужно, чтобы он был асинхронным.

Любые предложения, что я могу делать неправильно?

По умолчанию Axios выдает ошибку только для кодов состояния HTTP между 200 и 300.

Либо настройте Axios также для 422, установив validateStatus :

 axios.put('/api/settings', settings, {
  validateStatus: status => status >= 200 amp;amp; status < 300 || status === 422
})
 

Или проверьте код состояния в вашем обычном обратном вызове:

 response = await axios.put('/api/settings', settings);
if (response.status === 422) {
  // throw error
}