V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  Ng8023  ›  全部回复第 1 页 / 共 1 页
回复总数  1
2023-07-12 17:07:57 +08:00
回复了 bhbhxy 创建的主题 Vue.js axios 重发请求后数据如何重新渲染
个人经验给出以下方案:
----
1. 401 可以让后端包装在 200 状态内部(后端无论如何总是返回类似这样的结构), 这样就不会走到 onRejected 里面
{code:number, message?:string, data?:any}
^^--- 401 可以在这里返回
2. 拦截到 code===401 不着急返回, 根据业务处理进行处理:
a. 发广播到登录(授权)组件重新授权(假定为异步)
b. 拿到新的授权码(token), 重新发起本次请求(AxiosResponse<T>里面能获取到请求参数)
c. 注意: 要处理无限递归授权问题, 可以给定重试次数限制

----
伪代码:
service.interceptors.response.use(
(resp: AxiosResponse<vo.R>) => {
const r = resp.data;
if (r.code === 401) {
// 检测重试上限
if (++retryTimes >= MAX_RETRY_TIMES) {
return Promise.reject("授权失败");
}

// 重新获取授权码
// 拿到授权码并保存到状态管理
await reqAuth();

// 用新授权重试
return axios(resp.config);
}

// 其他逻辑
// 业务层只处理: {code:number, data?:any, message?:string} 结构
return r;
},
(err: AxiosError) => {
// 处理错误
}
)
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1990 人在线   最高记录 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 10ms · UTC 00:51 · PVG 08:51 · LAX 16:51 · JFK 19:51
Developed with CodeLauncher
♥ Do have faith in what you're doing.