You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Vue中Axios响应拦截器无法传递响应数据问题求助

解决Axios拦截器刷新令牌后原请求返回undefined的问题

你的问题核心是拦截器的异步返回值没有正确传递——在async错误处理函数里混用了.then()嵌套,导致重新发起请求的Promise没有被返回给原请求的Promise链,所以原请求的then里拿到的是undefined。

直接给你修改后的拦截器代码,同时优化了逻辑避免循环请求:

axios.interceptors.response.use(
  (response) => {
    return response;
  }, async (error) => {
    // 只处理401错误,且排除刷新令牌的请求本身,防止无限循环
    if (error.response?.status === 401 && error.config.url !== '/token/refresh') {
      try {
        // 创建专门用于刷新令牌的实例(这里的Authorization应该用刷新令牌,不是过期的access token)
        const refreshInstance = axios.create({
          baseURL: 'myrestbase',
          timeout: 1000,
          headers: {
            'Authorization': 'Bearer 你的刷新令牌', 
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          }
        });

        const tokenRes = await refreshInstance.post('/token/refresh');
        if (tokenRes.data.status) {
          const newAccessToken = tokenRes.data.raw_token;
          // 把新token存到全局(比如localStorage或Vuex),后续请求自动用新token
          localStorage.setItem('accessToken', newAccessToken);
          // 更新原请求的headers
          error.config.headers['Authorization'] = `Bearer ${newAccessToken}`;
          // 关键:返回重新请求的Promise,让原请求的then能拿到响应
          return axios(error.config);
        } else {
          ElMessage({
            message: '会话已过期,请重新登录。',
            type: 'warning'
          });
          logout();
        }
      } catch (refreshErr) {
        // 刷新令牌失败直接登出
        ElMessage({
          message: '登录状态失效,请重新登录。',
          type: 'error'
        });
        logout();
      }
    }
    // 非401错误或处理失败时,把错误抛回给原请求的catch
    return Promise.reject(error);
  }
);

关键修复点:

  1. 统一用async/await替代.then()嵌套:避免异步逻辑的返回值丢失,代码更易读
  2. 返回重新请求的Promise:return axios(error.config)会把重新请求的响应传递给原请求的.then(),这样就能拿到正常的响应数据
  3. 排除刷新请求本身:防止刷新令牌失败后再次触发401拦截,导致无限循环
  4. 全局存储新token:后续请求不用手动改headers,直接从全局读取即可

修改后,原请求代码就能正常拿到响应了:

axios.get('/original_request', { params: payload })
  .then(response => {
    console.log(response); // 现在能正确打印响应数据
  })
  .catch(err => {
    // 处理其他异常情况
  });

内容的提问来源于stack exchange,提问作者Brian Barton

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.12 11:33:12