Vuex axios调用无法处理422响应

Question

我正在尝试处理来自 API 的 422 响应，以防在进行异步 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(())，但也没有运气，因为我需要它是异步的。

有什么建议我可能做错了什么吗？

Answer 1

默认情况下，Axios 仅对 200 到 300 之间的 HTTP 状态代码抛出错误。

通过设置将 Axios 配置为也抛出 422 validateStatus：

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
}