Vue中使用Axios如何避免每次请求都判断error是否存在response

以下是3种可落地的方案，优先推荐前两种全局收口的方案： #

方案1：统一拦截器内规范错误返回结构 #

在Axios响应拦截器的错误处理逻辑中，对所有错误的返回格式做标准化处理，不管是否存在error.response，都对外暴露统一结构的错误对象，从根源避免后续读取属性报错。
修改后的拦截器代码参考：

axios.interceptors.response.use(
  function (response) {
    // 原有成功响应的处理逻辑保持不变
    return response
  },
  function (error) {
    // 构造标准化错误对象
    const standardError = {
      // 标记是否存在后端返回的响应
      hasResponse: !!error.response,
      // 后端返回的业务数据，无响应时默认是空对象，避免读取属性报错
      responseData: error.response?.data || {},
      // 通用错误提示信息，优先取后端返回的提示，无响应时取错误自带信息
      message: error.response?.data?.message || error.message
    }
    // 保留你原有无响应时的全局处理逻辑（比如全局提示网络错误等）
    if (!error.response) {
      // 你的原有逻辑，比如弹Toast、跳转登录等
      console.error('网络异常，请检查网络连接')
    }
    // 存在响应的情况也可以在这里加通用处理，比如401跳转登录等
    else if (error.response.status === 401) {
      // 处理登录失效逻辑
    }
    return Promise.reject(standardError)
  }
)

业务代码无需额外判断，直接使用即可：

this.$store.dispatch('updateField', { [this.fieldKey]: this.value ? this.value : null })
  .catch((error) => {
    // responseData至少是空对象，直接传不会报错
    this.validateField(error.responseData)
  })

方案2：封装通用请求方法收口错误判断 #

如果不想修改原有拦截器的逻辑，可以额外封装一层通用的请求/action调用方法，把错误判断逻辑收拢在封装层，业务层直接使用封装后的方法即可。
封装示例：

// 封装axios请求方法
export function request(config) {
  return axios(config)
    .catch(error => {
      // 只有存在后端响应的错误才抛给业务层处理
      if (error.response) {
        return Promise.reject(error.response.data)
      }
      // 无响应的错误全局处理完成后吞掉，无需业务层感知
      console.error('网络异常', error.message)
      return Promise.resolve()
    })
}
// 如果是通过store.dispatch发请求，也可以封装action调用方法
Vue.prototype.$dispatchWithCatch = function(actionName, params) {
  return this.$store.dispatch(actionName, params)
    .catch(error => {
      if (error.response) {
        return Promise.reject(error.response.data)
      }
      console.error('网络异常', error.message)
      return Promise.resolve()
    })
}

业务调用示例：

this.$dispatchWithCatch('updateField', { [this.fieldKey]: this.value ? this.value : null })
  .catch((data) => {
    // 这里拿到的直接就是后端返回的data，无需额外判断
    this.validateField(data)
  })

方案3：可选链操作符临时兜底 #

如果不想改动全局逻辑，也可以在业务代码中用可选链操作符?.做属性读取兜底，避免报错，同时可以在validateField方法内部兼容入参为undefined的情况即可。
示例：

this.$store.dispatch('updateField', { [this.fieldKey]: this.value ? this.value : null })
  .catch((error) => {
    // 可选链读取，response不存在时返回undefined
    this.validateField(error.response?.data)
  })

内容的提问来源于stack exchange，提问作者Bruno Aguiar de Souza