避免在每个请求中使用 Axios 在 Vue 中响应错误时进行处理答案

【问题标题】：Avoid handling if error has response in Vue with Axios in every request避免在每个请求中使用 Axios 在 Vue 中响应错误时进行处理
【发布时间】：2021-12-02 13:18:20
【问题描述】：

我使用 axios 拦截器来处理一些错误，特别是没有响应的错误。在我项目的某些部分，我使用 error.response.data 中包含的消息进行验证并显示存储在后端的消息。但是这个拦截器并没有阻止我检查错误是否有响应。

我的拦截器：

axios.interceptors.response.use(
    function (response) {
      ...
    },
    function (error) {
      if (!error.response) {
        ...
        return Promise.reject(new Error(error.message))
      }

一个依赖于error.response的请求示例：

this.$store.dispatch('updateField', { [this.fieldKey]: this.value ? this.value : null }).catch((error) => {
        this.validateField(error.response.data)
      })

但我必须将 validateField 调用放在 if(eror.response) 中以避免控制台中的错误，并将其传播到我的代码中？

【问题讨论】：

标签： javascript vue.js error-handling vuejs2 axios

【解决方案1】：

response 可以视为可选，因为它实际上是：

this.validateField(error.response?.data)

或者可以在拦截器中创建包含所需属性且不依赖于 Axios 错误结构的规范化错误：

function (rawError) {
  const error = new Error(error.response?.data?.myError || error.message);
  error.data = error.response?.data || null;
  error.headers = error.response?.headers || null;
  error.status = error.response?.status || 0;
  return Promise.reject(error);
}

【讨论】：