直接封装带加载状态和错误提示的高阶请求函数，核心是统一管理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 配置，返回一个新的异步函数：

• 执行前自动调用 showLoading(options)；
• 执行后（无论成功或失败）自动调用 hideLoading()；
• 保留原函数的返回值，方便上层用 await 获取数据。

示例：const fetchUser = withLoading(() => api.getUser(id))，调用 fetchUser() 就自带全屏 loading。

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

结合 Axios 拦截器统一管理

如果项目已用 Axios，更推荐在拦截器中联动 Loading：

• 请求拦截器里不直接操作 DOM，而是发一个自定义事件或更新一个响应式状态（如 isLoading ref）；
• 响应拦截器里同样触发关闭；
• 再用一个全局 Loading 组件监听该状态，实现“一处触发、全局响应”。

这样比手动调用 withLoading 更轻量，尤其适合大量接口场景，也避免遗漏某处未包裹。

错误提示也走统一通道

错误处理不必每个请求都写 alert 或 ElMessage：

• 在响应拦截器中判断状态码（如非 200、401、500 等），提取错误信息；
• 调用 ElMessage.error(msg) 弹出提示；
• 对登录失效（401）等特殊状态，还可跳转登录页或清 token。

所有错误逻辑集中维护，后续改提示样式或加埋点，只改一处就行。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！