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); } );
关键修复点:
- 统一用
async/await替代.then()嵌套:避免异步逻辑的返回值丢失,代码更易读 - 返回重新请求的Promise:
return axios(error.config)会把重新请求的响应传递给原请求的.then(),这样就能拿到正常的响应数据 - 排除刷新请求本身:防止刷新令牌失败后再次触发401拦截,导致无限循环
- 全局存储新token:后续请求不用手动改headers,直接从全局读取即可
修改后,原请求代码就能正常拿到响应了:
axios.get('/original_request', { params: payload }) .then(response => { console.log(response); // 现在能正确打印响应数据 }) .catch(err => { // 处理其他异常情况 });
内容的提问来源于stack exchange,提问作者Brian Barton
相关产品推荐
相关产品推荐

