直接封装带加载状态和错误提示的高阶请求函数，核心是统一管理loading控制、请求执行与错误处理；使用Element Plus的ElLoading服务实现单例加载提示，通过withLoading高阶函数包裹异步请求自动启停loading，并推荐结合Axios拦截器与全局状态实现更轻量的统一管理。
直接封装一个带加载状态和错误提示的高阶请求函数，核心是把 loading 控制、请求执行、错误统一处理这三件事收拢到一个函数里，而不是在每个组件里重复写 loading = true、try/catch、loading = false。
用 Element Plus 的 ElLoading 封装 show/hide 方法
先确保项目已安装 Element Plus，并全局或按需引入 ElLoading 服务。然后定义两个基础控制函数：
-
showLoading：接收可选配置（如提示文字、背景色），调用
ElLoading.service()创建实例并保存； -
hideLoading：检查是否存在实例，有则调用
.close()并清空变量。
注意不要让多次调用 showLoading 创建多个重叠 Loading，靠单例变量 loadingInstance 控制即可。
封装 withLoading 高阶函数
这个函数接收一个异步函数（比如 API 调用）和可选 Loading 配置，返回一个新的异步函数：
立即学习“前端免费学习笔记（深入）”；
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 执行前自动调用
showLoading(options)； - 执行后（无论成功或失败）自动调用
hideLoading()； - 保留原函数的返回值，方便上层用
await获取数据。
示例：const fetchUser = withLoading(() => api.getUser(id))，调用 fetchUser() 就自带全屏 loading。
结合 Axios 拦截器统一管理
如果项目已用 Axios，更推荐在拦截器中联动 Loading：
- 请求拦截器里不直接操作 DOM，而是发一个自定义事件或更新一个响应式状态（如
isLoadingref）； - 响应拦截器里同样触发关闭；
- 再用一个全局 Loading 组件监听该状态，实现“一处触发、全局响应”。
这样比手动调用 withLoading 更轻量，尤其适合大量接口场景，也避免遗漏某处未包裹。
错误提示也走统一通道
错误处理不必每个请求都写 alert 或 ElMessage：
- 在响应拦截器中判断状态码（如非 200、401、500 等），提取错误信息；
- 调用
ElMessage.error(msg)弹出提示； - 对登录失效（401）等特殊状态，还可跳转登录页或清 token。
所有错误逻辑集中维护，后续改提示样式或加埋点，只改一处就行。
