前言

小程序自带的有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)
}

 

结语

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