小程序wx.showToast()与wx.hideLoading()冲突的问题

张绪航 2020-05-05 18:14:03 1951 浏览前端小程序

真机上测试发现调用 showToast 不显示，或者闪一下就没了。经过查找，发现是与 wx.showLoading 冲突了，两者调用的是同个框。

先放上我的错误代码：

// 请求事件
requestEvent: function() {

    wx.showLoading({
        title: '正在加载中',
    })
    wx.request({
        url: '',
        success: function(res) {
            wx.showToast({
                title: '成功',
                duration: 2000
            })
        },
        fail: function() {
            wx.showToast({
                title: '失败',
                duration: 2000
            })
        },
        complete: function() {
            wx.hideLoading()
        }
    })
}

我是想请求接口后，将加载框隐藏掉，再显示 toast 提示。但是真机上发现 showToast 不显示。正如上面所说，两者调用的是同个框。现在，我们分析整个流程：

首先显示 loading 框；
然后调用 success / fail，弹框的内容由 loading 变成了 toast；
最后调用 onComplete 时，hideLoading 将弹框隐藏掉了；

很明显，我们最终把 toast 框隐藏掉了。知道原因后，改起来就容易了。先调用wx.hideLoading()，再调用wx.showToast()即可。

建议：

若是在网络请求前需要调用wx.showLoading，建议在该 success 和 fail 回调函数内第一行就调用wx.hideLoading。即使暂时不需要showToast操作。因为以后需要在回调函数内添加 toast 时，就不用再管什么顺序问题了；
当 toast 和 loading 同时使用，多注意两者的调用顺序；

如下是正确代码：

// 请求事件
requestEvent: function() {

    wx.showLoading({
        title: '正在加载中',
    })
    wx.request({
        url: '',
        success: function(res) {
            wx.hideLoading()
            wx.showToast({
                title: '成功',
                duration: 2000
            })
        },
        fail: function() {
            wx.hideLoading()
            wx.showToast({
                title: '失败',
                duration: 2000
            })
        }
    })
}