小程序优化安卓机发送请求时加载框闪现

谁借莪１个温暖的怀抱￠ 2021-10-23 22:15 235阅读 0赞

# **前言** #

> 小程序自带的有loading框，我们可以在再封装wxRequest方法，使当请求回调之前显示loading框，请求结束隐藏loading框，但是最近业务中发现了一个问题，当页面加载需要在时间段内调用多个请求时，会造成loading框闪现,所以我们现在要来解决的是，当一个页面很多请求的时候，如何当第一个请求开始时显示loading, 当所有请求完成时再关闭loading？

# **初步实现：** #

设置一个计数器，因为这里的请求方法都要经过wxRequest，所以说我们只需要在wxRequest调用的时候+1，在返回失败或者成功的时候-1就可以，当等于0的时候调用关闭loading的方法就可以了~

注意：小伙伴们注意请求返回失败的时候不要忘记了-1哟，否则就会导致一直loading中

// 请求次数统计
    if (this.globalData.pageRequestCount === 0) {
      wx.showLoading({
        title: '加载中...',
      });
    }
    this.globalData.pageRequestCount++;
    
    // 请求回调中判断当前是否还有未完成的请求
    if(this.globalData.pageRequestCount<=0) return;
    this.globalData.pageRequestCount--;
    
    if (this.globalData.pageRequestCount === 0) {
        wx.hideLoading();
    }

# **再优化：** #

但是，如果两条请求间隔时间比较短时，可以设置一个延时器，500ms后再让其endloading.如果数字为0，判断当前有没有延时器，如果有的话，清除，重新设置。一定要500ms之后才会触发.也就是说得在500ms之内再没有新的请求才会触发endloading。（用到了事件防抖的思想）；

if (this.globalData.pageRequestCount === 0) {
        let _this = this;
        // 加载完之后等待 500ms，再次检查是否没有新的请求, 如果没有，这才结束加载框
        let timer = setTimeout(function(){
          if(timer){
            clearTimeout(timer);
          }
          if(_this.globalData.pageRequestCount === 0){
            wx.hideLoading();
          }
        }, 500)
    }

# **结语** #

如果文章对你有帮助，麻烦点赞哦，一起走花路吧~

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70]: /images/20211023/1b520debd8334a82a5093dffd90ca23d.png