使用uni.showToast提示请注意 showLoading 与 hideLoading 必须配对使用

### 正确使用 `uni.showToast`、`showLoading` 和 `hideLoading` 为了确保在 uni-app 中 `showToast` 的 `showLoading` 和 `hideLoading` 成对使用，避免出现警告或异常情况，建议遵循以下实践： #### 1. 使用回调函数处理异步操作 通过将 `uni.showLoading()` 放置在发起请求之前，并在其后的适当位置调用 `uni.hideLoading()` 来保证成对使用。对于可能立即完成的操作，应考虑最小化加载提示框展示的时间。 ```javascript // 发起网络请求前显示加载动画 uni.showLoading({ title: '加载中...' }); someAsyncOperation().then(() => { // 请求完成后隐藏加载动画 uni.hideLoading(); }).catch((error) => { console.error(error); uni.hideLoading(); // 即使发生错误也要关闭加载动画 }); ``` #### 2. 利用定时器防止过早结束 有时由于响应速度极快可能导致视觉上看不到加载效果，在这种情况下可以通过设定短暂延时来模拟正常的等待过程[^4]。 ```javascript let timer; function startLoading() { clearTimeout(timer); // 清除之前的计时器以防重复创建 uni.showLoading({title:'加载中...'}); // 设置一个小延迟以确保用户能看到加载状态 timer = setTimeout(function(){ stopLoading(); }, 3000); // 延迟三秒自动停止加载（可根据实际需求调整） } function stopLoading() { clearTimeout(timer); // 防止多次触发stopLoading造成不必要的清除动作 uni.hideLoading(); } ``` #### 3. 结合 Promise 处理复杂逻辑 当业务流程较为复杂时，可以借助 JavaScript 的 Promise 对象更好地管理多个异步任务间的依赖关系，从而简化代码结构并提高可读性和维护性。 ```javascript async function fetchDataAndShowResult(url) { try { uni.showLoading({title:"正在获取数据..."}); const response = await fetch(url).timeout(5000); // 添加超时机制 if (!response.ok) throw new Error('Network response was not ok'); let data = await response.json(); // 数据处理完毕后更新UI界面... updateUI(data); uni.showToast({ title: "数据已成功加载", icon: "success" }); } catch (err) { console.log(err.message); uni.showToast({ title: err.message, icon: "none" }); } finally { uni.hideLoading(); } } ``` 以上方法能够有效减少因不当使用 API 导致的问题，同时也提高了用户体验的一致性和流畅度。