Vuex Axios 호출이 422 응답을 처리할 수 없음

Vuex Axios 호출이 422 응답을 처리할 수 없음

비동기 Axios 호출 시 데이터가 유효하지 않은 경우 API에서 422 응답을 처리하려고 합니다.

컴포넌트에는 다음과 같은 방법이 있습니다.

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는 200 ~300 의 HTTP 상태 코드에 대해서만 에러를 발생시킵니다.

Axios도 422에 대해 슬로우하도록 설정하려면 다음 중 하나를 설정합니다.

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

또는 일반 콜백 상태 코드를 확인합니다.

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

언급URL : https://stackoverflow.com/questions/66285356/vuex-axios-call-cant-handle-422-response