解决 TypeScript 在 axios 响应拦截器中返回数据时的类型报错
在提供的代码中,您使用了 TypeScript 来定义一个响应式拦截器,用于处理 axios 的响应。您遇到了一个 TypeScript 类型报错,特别是在尝试返回 response.data 时。这个问题可能是因为 TypeScript 编译器无法正确推断 response.data 的类型。为了解决这个问题,您需要确保 ApiResponse 接口中的泛型 T 能够正确地与 response.data 的类型匹配。以下是一个可能的解决方案:
// 响应拦截器
instance.interceptors.response.use (
response => {
// 处理业务失败
const data = response.data as ApiResponse<any> // 明确指定泛型
if (data.code !== 10_000) {
showFailToast(data.message || '业务失败')
return Promise.reject(new Error(data.message || '业务失败'))
}
// 摘取核心数据
return response.data;
},
(error: AxiosError) => {
if (error.response?.status === 401) {
// 401 未授权,清除用户信息
const store = useUserStore()
store.clearUser()
// 保留当前地址,并跳转到登录页面
// 使用 void 明示不处理 promise
void router.push({
path: '/login',
query: { redirect: router.currentRoute.value.fullPath },
})
}
},
)在这个修改中,我添加了 ApiResponse<any> 来明确指定泛型 T。这应该能够解决 TypeScript 编译器在处理 response.data 时的类型推断问题。如果 response.data 的实际类型是已知的,您也可以将 any 替换为具体的类型。希望这能帮助您解决问题!
评论已关闭