Vuex axios呼叫可以处理422响应

2022-03-03 00:00:00 axios javascript vue.js vuex

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

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


解决方案

默认情况下,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
}

相关文章