Axios响应拦截器始终返回Undefined问题求助

问题情况 #

自定义Axios实例apiCaller配置了响应拦截器，使用processResponse函数处理响应，该函数能正常打印响应状态码，但前端通过await API.usersignup(tmp)调用接口后，获取到的res始终为undefined。错误拦截器能正常返回被拒绝的Promise，但成功响应时无法拿到数据。

相关代码片段：

processResponse函数 #

const processResponse=(res) => {
    console.log(res.status);
    if (res.status===200) {
        return {isSuccess: true, data: res.data};
    }
    else {
        return {
            isFailure: true,
            status: res?.status,
            msg: res?.msg,
            code: res?.code
        };
    }
};

Axios响应拦截器 #

apiCaller.interceptors.response.use(
    function (res) {
        return processResponse(res);
    },
    function (err) {
        return Promise.reject(processError(err));
    }
);

前端调用代码 #

const signupUser=async () => {
        const tmp={
            username: username,
            name: name,
            password: password,
        };
        let res=await API.usersignup(tmp);
        console.log(res);
        if (res.isSuccess) {
            setName("");
            setUsername("");
            setPassword("");
            changeLogin;
        }
        else {
            setErr("Oops! Something went wrong :(");
        }
    };

核心原因分析 #

1. API封装方法未返回Axios请求的Promise
   这是最直接的问题：如果API.usersignup方法在封装时没有返回Axios的请求结果（即apiCaller.post(...)的Promise），函数会默认返回undefined，前端await的就是undefined，自然无法拿到拦截器处理后的响应数据。

2. processResponse的else分支逻辑无效
   Axios的响应拦截器成功回调仅处理状态码为2xx的响应，非2xx的响应会直接进入错误拦截器，因此processResponse中的else分支永远不会被触发，这部分逻辑完全无效。

解决方案 #

1. 修复API封装方法，确保返回Promise #

检查API.usersignup的实现，确保返回Axios请求的Promise：

错误写法（无return）：

const API = {
  usersignup: (data) => {
    apiCaller.post('/api/signup', data)
  }
}

正确写法（添加return）：

const API = {
  usersignup: (data) => {
    return apiCaller.post('/api/signup', data)
  }
}

或者简化为箭头函数的隐式返回：

const API = {
  usersignup: (data) => apiCaller.post('/api/signup', data)
}

2. 修正拦截器与错误处理逻辑 #

调整响应拦截器，利用Axios的拦截器规则，在成功回调处理2xx响应，错误回调处理所有非2xx响应：

apiCaller.interceptors.response.use(
  function (res) {
    // 仅处理2xx状态码的响应，返回成功结构
    return { isSuccess: true, data: res.data };
  },
  function (err) {
    // 处理所有非2xx状态码的响应，构造错误结构后reject
    const errorRes = err.response;
    const errorInfo = {
      isFailure: true,
      status: errorRes?.status,
      msg: errorRes?.data?.msg || err.message,
      code: errorRes?.data?.code
    };
    return Promise.reject(errorInfo);
  }
);

同时，前端调用时需要通过try/catch捕获错误，避免未处理的Promise rejection：

const signupUser = async () => {
  const tmp = {
    username: username,
    name: name,
    password: password,
  };
  try {
    const res = await API.usersignup(tmp);
    console.log(res);
    if (res.isSuccess) {
      setName("");
      setUsername("");
      setPassword("");
      changeLogin(); // 修正：调用函数需加括号
    }
  } catch (err) {
    console.log(err);
    setErr(err.msg || "Oops! Something went wrong :(");
  }
};

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