教你解决showLoading 和 showToast显示异常的问题
问题描述
当wx.showLoading 和 wx.showToast 混合使用时,showLoading和showToast会相互覆盖对方,调用hideLoading时也会将toast内容进行隐藏。
触发场景
当我们给一个网络请求增加Loading态时,如果同时存在多个请求(A和B),如果A请求失败需要将错误信息以Toast形式展示,B请求完成后又调用了wx.hideLoading来结束Loading态,此时Toast也会立即消失,不符合展示一段时间后再隐藏的预期。
解决思路
这个问题的出现,其实是因为小程序将Toast和Loading放到同一层渲染引起的,而且缺乏一个优先级判断,也没有提供Toast、Loading是否正在显示的接口供业务侧判断。所以实现的方案是我们自己实现这套逻辑,可以使用Object.defineProperty方法重新定义原生API,业务使用方式不需要任何修改。
代码参考
[代码]// 注意此代码应该在调用原生api之前执行
let isShowLoading = false;
let isShowToast = false;
const {
showLoading,
hideLoading,
showToast,
hideToast
} = wx;
Object.defineProperty(wx, 'showLoading', {
configurable: true, // 是否可以配置
enumerable: true, // 是否可迭代
writable: true, // 是否可重写
value(...param) {
if (isShowToast) { // Toast优先级更高
return;
}
isShowLoading = true;
console.log('--------showLoading--------')
return showLoading.apply(this, param); // 原样移交函数参数和this
}
});
Object.defineProperty(wx, 'hideLoading', {
configurable: true, // 是否可以配置
enumerable: true, // 是否可迭代
writable: true, // 是否可重写
value(...param) {
if (isShowToast) { // Toast优先级更高
return;
}
isShowLoading = false;
console.log('--------hideLoading--------')
return hideLoading.apply(this, param); // 原样移交函数参数和this
}
});
Object.defineProperty(wx, 'showToast', {
configurable: true, // 是否可以配置
enumerable: true, // 是否可迭代
writable: true, // 是否可重写
value(...param) {
if (isShowLoading) { // Toast优先级更高
wx.hideLoading();
}
isShowToast = true;
console.error('--------showToast--------')
return showToast.apply(this, param); // 原样移交函数参数和this
}
});
Object.defineProperty(wx, 'hideToast', {
configurable: true, // 是否可以配置
enumerable: true, // 是否可迭代
writable: true, // 是否可重写
value(...param) {
isShowToast = false;
console.error('--------hideToast--------')
return hideToast.apply(this, param); // 原样移交函数参数和this
}
});
[代码]
调整后展示逻辑为:
优先级:Toast>Loading,如果Toast正在显示,调用showLoading、hideLoading将无效
调用showToast时,如果Loading正在显示,则先调用 wx.hideLoading 隐藏Loading