应在 uni.request 的 complete 回调中统一调用 uni.hideloading，请求前用 uni.showloading 显示，并通过参数控制开关、防重及自定义文案，避免在 success/fail 单独处理导致 loading 卡死。
uni.request 里怎么加 loading 提示
直接在 uni.request 的 beforeRequest 或 success/fail 钩子中手动调用 uni.showLoading 和 uni.hideLoading 是最常见也最容易出错的方式——因为没配 complete，失败时 loading 就卡住不消失。
正确做法是：所有请求统一走封装层，在 uni.request 的 complete 回调里收尾 uni.hideLoading，不管成功失败都执行。
-
uni.showLoading必须放在uni.request调用前，且建议加防重：避免连续点击触发多次 loading - 不要在
success里 hide，否则网络超时或 fail 时 loading 会一直挂着 - 如果项目用了
uni.showToast做错误提示，记得和 loading 错开时间，否则 toast 可能被 loading 遮住
封装 request 时如何控制 loading 显示开关
硬编码所有请求都 showLoading 不现实——比如下拉刷新的接口、轮询心跳、静默上传头像等场景都不该弹 loading。所以必须支持按需开关。
推荐在封装函数的参数里加一个 loading 字段，默认 true，业务层可显式传 false 关闭：
export default (params) => {
const showLoading = params.loading !== false // 默认 true
if (showLoading) {
uni.showLoading({ title: params.loadingText || '加载中...' })
}
return new Promise((resolve, reject) => {
uni.request({
// ...其他配置
complete() {
if (showLoading) uni.hideLoading()
}
})
})
}
- 别用全局变量控制 loading 状态，容易被并发请求干扰
-
loadingText作为可选参数，方便不同接口显示不同文案（如“提交中…”“删除中…”） - 如果用了自定义 loading 组件（非
uni.showLoading），注意组件实例生命周期要和请求强绑定，避免请求已结束但组件还在
为什么 loading 在 H5 端不生效或样式错乱
因为 uni.showLoading 在 H5 平台是模拟实现的，依赖 document.body 注入 DOM，而某些 UI 框架（如 uView、uni-ui）或自定义 router-view 的渲染顺序可能让 loading 被遮挡或 z-index 失效。
- 检查是否在
pages.json中启用了"enablePullDownRefresh": true，它会和 loading 冲突，导致 H5 下 loading 被下拉动画覆盖 - H5 端若用了 Vue Router 的懒加载，确保 loading 插入时机早于路由视图挂载
- 真机调试时，iOS Safari 对
position: fixed的 stacking context 处理较严格，可给 loading 容器加transform: translateZ(0)强制提升层级
多个请求嵌套时 loading 怎么避免重复触发
比如一个页面初始化要发 3 个接口，每个都 showLoading 就会闪三次。这不是 UX 问题，而是逻辑缺陷：loading 应该代表「当前页面数据正在加载」，不是「每个请求都在加载」。
解决思路是把 loading 状态提到页面级或 store 级管理，而不是每个请求独立控制：
- 用
Promise.all合并多个请求，在外层统一 show/hide - 在页面
onLoad里手动控制 loading 开关，请求发起前 show，全部 resolve/reject 后 hide - 如果用了 Pinia/Vuex，可在 store 中维护
loadingCount，每次请求开始 +1、结束 -1，为 0 时才 hide
最常被忽略的一点：uni.hideLoading 不是幂等操作，重复调用不会报错，但如果你在 complete 里无条件调用，又在业务层手动调了，就可能出现「刚 show 就 hide」的白屏抖动。务必保证 loading 的 show/hide 成对出现，且只由同一层逻辑控制。
