axios 重发请求后数据如何重新渲染

[bhbhxy]

由于 token 过期，在获取新 token 后使用 axios 重新发送之前的请求，数据也传回来了，但是现在有一个问题，列表数据无法显示了，页面的结构是这样的 index.vue

<template>
	<ChildComponent />
</template>

我是在<ChildComponent />中请求的数据：

	<template>
    	<ul>
        	<li v-for="item in list">{{item}}</li>
        </ul>
    </template>
    <script>
		const list = getDataFromApi().data
    </script>

重发请求写在拦截器里：

axios.interceptors.response.use(
	response => {
		//请求重发
        if(statusCode === 401) {
        	getNewToken()
			return axios.request(response.config);
        }
	}	
})

请求是重发了，但是组件里的list并没有接收到新数据，因此列表也没有重新渲染，请问这种情况怎么处理，或者有什么别的解决方案吗

[summerLast]

@bhbhxy 第一次的 list 是什么还是就是 401

[bhbhxy]

@shakukansp 专门为这个引入一个库是否增加开发成本

[bhbhxy]

@summerLast token 没失效是正常的，失效了才返回 401 ，这时候再去获取新 token ，然后重发之前的请求

[shakukansp]

@bhbhxy 自己写个简单的也行，但是你自己写的肯定没封装好的考虑全面

[summerLast]

@bhbhxy 建议直接 打印 （(await getDataFromApi()).data ）, 看看哪块报错了，伪代码看着没有逻辑上的问题 建议 axios.request(reponse.config) 增加上 await

[shakukansp]

const useRequest = (fn) => {
const data = ref()
const send = async () => {
data.value = await fn
}

return {
data,
send
}
}

[shakukansp]

里面的 fn 加个()

[wali77]

这种问题 GPT 最擅长

https://www.dooocs.com/chatgpt/README.html

[zcf0508]

不是响应式的问题吧，你要处理的是看下拦截器为什么没有返回数据

[bhbhxy]

@shakukansp 感谢感谢，我好像弄明白了

[bhbhxy]

@wali77 最近好用的不用梯子的 gpt 都不能访问了，感谢提供新资源🌹

[shakukansp]

@bhbhxy 这个是大概思路，实际上还要处理错误啥的

[Ng8023]

个人经验给出以下方案:
----
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) => {
// 处理错误
}
)

[liberty1900]

关于 refresh access token 我之前写过博客: https://blog.realrz.com/http-request-wrapper-using-axios#%E6%8B%A6%E6%88%AA%E5%99%A8%E7%94%A8%E6%B3%95%E7%A4%BA%E4%BE%8B---refresh-access

[mingl0280]

@bhbhxy 外部代码需要引用特定 component 的实例才能修改实例内部数据。你自己没把实例保存下来吧？我就没看见你引用 childComponent 的实例的。

[webszy]

真的很简单，想要触发 v–for 的重绘，可以修改 key