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

Posted 2023-02-16

【中文标题】避免在每个请求中使用 Axios 在 Vue 中响应错误时进行处理

【英文标题】：Avoid handling if error has response in Vue with Axios in every request

【发布时间】：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) 中以避免控制台中的错误，并将其传播到我的代码中？

【参考方案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);