节流阀-什么是节流阀?
节流阀就是在请求数据时,防止在上拉请求或者点击请求时,因为网络延迟或者误操作引起同一数据被多次请求前者没有请求完就执行第二次请求,3次.....导致网络卡顿甚至停止响应。
使用节流阀时,在data中声明一个节流阀为fasle 默认关闭, 在请求数据时,开启节流阀,请求完成关闭节流阀,在调用请求时,判断节流阀的值如果为true就请求,如果是关闭状态就请求数据,如果是打开的状态就不请求数据,如果是打开的状态就证明节流阀时开启的并且正在请求数据,所以就不能再次请求了。
代码:
data:
// 节流阀 是否正在请求数据
isLoading:false,
请求:
async sqsearch(){
// 前 打开节流阀
this.isLoading= true
let {data:res} = await uni.$http.get('goods/search',this.queryObj)
// 后 关闭节流阀
this.isLoading= false
console.log(res.message);
console.log(res.message.goods);
// 过滤出来为空的就不显示
let obj = res.message.goods.filter(res=>{
return res.goods_big_logo !== ''
})
this.shuzu = [...this.shuzu,...obj]
// 总条数
this.total = res.message.total
this.pagenum = res.message.pagenum
console.log(this.shuzu);
},
上拉加载触发请求:
onReachBottom(){
// 思路在请求的时候设置一个值 为节流阀 请求前true 请求完成后fasle,然后判断他为true 就让页面自增1重新请求
// 在上拉触底事件函数中 根据节流阀的状态绝对是否发起请求
// 当前页*每页条数 大于总数就提示 先提示
if(this.queryObj.pagenum*this.queryObj.pagesize >= this.total) return wx.showToast({title: '暂无更多',})
//如果值是当前定义的值就执行return下面的代码
if(this.isLoading) return
// 页面自增 1
this.queryObj.pagenum = this.queryObj.pagenum+1
// 重新获取数量列表
this.sqsearch()
},