在Vue 3应用中优雅集成全局Loading，优化用户体验
许多Vue 3开发者都希望在网络请求期间显示全局Loading动画，提升用户体验，尤其是在表格数据加载场景中。本文将探讨如何在Vue 3中实现这一功能，并结合示例说明其在表格数据加载中的应用。
核心目标是在Vue 3项目中巧妙地实现全局Loading效果，确保其与表格数据加载过程中的用户交互流畅。一种常用的方法是利用axios拦截器。
通过axios拦截器，我们可以在请求发送前显示Loading，请求完成后隐藏Loading。关键在于精确控制Loading的显示和隐藏。以下代码片段演示了如何使用axios拦截器和自定义配置来实现：
立即学习“前端免费学习笔记（深入）”；
// 接口定义
export const test1 = (data) => request.post('/test', data, { notLogin: true });
export const test2 = (data) => request.post('/test2', data, { loading: true });
// axios拦截器
instance.interceptors.request.use(
(config) => {
if (!config.notLogin) {
// 部分无需登录即可访问的接口，需在config中添加'notLogin'键，例如 { notLogin: true }
}
if (config.loading) {
// 显示Loading，请求完成后隐藏Loading (具体实现依赖UI组件库)
}
return config;
},
(error) => {
// 处理请求错误
return Promise.reject(error);
}
);
代码中，我们定义了两个接口test1和test2。test1用于无需显示Loading的请求（例如无需登录即可访问的接口）；test2用于需要显示Loading的请求。通过在请求配置中添加loading: true来控制是否显示Loading。拦截器会在发送请求前检查config.loading属性，并据此控制Loading的显示和隐藏。 需要注意的是，代码中省略了Loading显示和隐藏的具体实现，这取决于项目中使用的UI组件库。例如，可以使用全局Loading组件来控制其显示和隐藏状态。
这种方法有效地解耦了Loading逻辑和业务逻辑，使代码更清晰易于维护。
