Vuex axios调用无法处理422响应

Posted 2023-03-28

【中文标题】Vuex axios调用无法处理422响应

【英文标题】：Vuex axios call can't handle 422 response

【发布时间】：2021-05-22 21:42:03

【问题描述】：

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

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

【参考方案1】：

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

通过设置 validateStatus 来配置 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