Vue+Laravel项目Axios拦截器异常：.then总是在.catch后触发

问题核心 #

你的拦截器在处理错误后未返回rejected状态的Promise，导致Axios认为错误已被“消化”，会继续执行API调用链的then块，但此时没有有效响应数据，进而触发response is not defined错误。你之前尝试的Promise.reject是正确方向，控制台出现的400错误是浏览器对HTTP错误状态码的默认日志，属于正常现象，可通过优化处理兼顾逻辑正确性与控制台干净度。

解决方案 #

1. 确保所有错误分支返回Rejected Promise #

修改拦截器代码，在所有错误处理逻辑完成后，统一返回Promise.reject(error)，强制Promise保持rejected状态，阻止then块执行：

import { useUserStore } from "./stores/userStore"

axios.interceptors.response.use(
  function (response) { 
    return response 
  },
  function (error) {
    // 开发环境保留日志，生产环境可移除或通过环境变量控制
    if (import.meta.env.DEV) {
      console.log("fonction error de l'interceptor");
      console.log(error.response);
    }

    if (error.response.data.errors) {
      const userStore = useUserStore()
      userStore.storeErrors(error.response.data.errors)
    } else if (error.response?.message) {
      alert(error.response.message)
    } else {
      alert("Une erreur s'est produite. Certains éléments peuvent ne pas être affichés. Vous pouvez essayer de recharger la page pour corriger le problème.")
    }

    // 关键：强制Promise进入rejected状态，避免进入then块
    return Promise.reject(error)
  }
);

2. 优化控制台HTTP错误日志（可选） #

浏览器默认会打印4xx/5xx状态码的网络日志，若想在生产环境隐藏：

• 移除拦截器中的console.log语句，或用环境变量控制仅在开发环境打印
• 不建议修改Axios的validateStatus配置（如把4xx视为成功），这会破坏错误处理的逻辑一致性

3. 组件层面的额外保障（可选） #

为避免极端情况（如拦截器逻辑异常）导致then块执行，可在组件的API调用中添加响应存在判断：

yourApiCall().then(response => {
  if (response) {
    // 原有的响应处理逻辑
  }
})

原理说明 #

Axios拦截器的错误处理函数若未返回任何值，或返回resolved状态的Promise，Axios会将整个请求Promise标记为resolved，进而触发then块执行。只有返回Promise.reject(error)，才能让请求Promise保持rejected状态，跳过then块，彻底避免response is not defined错误。

内容的提问来源于stack exchange，提问作者HugoVirot