uniapp下拉加载下一页设置节流阀控制多次数据请求

Posted 2022-11-27 铁锤妹妹@

1. 前言

我们在下拉刷新过程会由于网速慢或各种原因，数据请求慢，此时我们在还没请求回数据又下拉刷新一次，
但此时数据还未加载完成（函数还未运行完） ，此时页数+1，后面等到数据再次请求就不是下一页了

2. 思路

1. 定义一个“节流阀” ： isLoading : false
2. 请求数据前开启“节流阀”：isLoading : true
3. 请求数据完成后，关闭“节流阀”：isLoading : false ----- 在接口请求数据成功之后关闭
4. 触底时判断是否上次数据已返回，可继续请求：onReachBottom方法中(触底)添加isLoading的判断

2. 定义节流阀

export default 
  data() 
    return 
      isLoading: false, //节流阀：判断是否已经请求完成，并返回数据。如果已返回则关闭节流阀，可再次请求下次数据
      page: 1,
      goodsList:[]
    ;
  ,

3. 添加判断

获取数据之前节流阀设为true， 允许加载，请求到数据之后，改成false
最主要的是，在触底函数onReachBottom增加判断isLoading !== true,才可以继续请求接口。

//判断节流阀是否在开启状态（开启，还在请求数据的路上，数据未请求回来）
  onReachBottom() 
  //注意 这里是重要的一步，不满足条件下拉加载不能继续请求数据
    if(!this.isLoading)
      this.getGoodsList()
    
    
  ,
  methods:
   getGoodsList() 
      // 显示加载效果
      uni.showLoading()
      // 发起请求前：修改 节流阀 的值（true开启）
      this.isLoading = true;
      goodsApi["getGoods"](
        page: this.page,
      )
        .then((res) => 
         // 隐藏加载效果
          uni.hideLoading()
          if (res.data.code === "20000") 
            this.goodsList = this.goodsList.concat(res.data.data.goods_list);
            this.page++;
            //请求成功 节流阀 设置为false（没有走完函数不允许再次请求）
             his.isLoading = false;
          
        )
        .catch((error) => 
          console.log(error);
        );
    ,
  

可参考
文章目录第二项 设置节流阀控制数据请求