移动端搜索功能实现及异步数据引起bug问题初探

移动端开发过程中,总会遇到搜索功能的实现,但这个过程会产生因快速搜索让异步数据加载导致的List数组数据未清空从而导致数据多次push进数组
如果手机端不停下拉刷新,由于数据都是异步加载的,这个过程会产生异步数据延时,这时需要后端对查询的数据进行分页处理
若后端没做分页处理,前端可以采取截流操作,即让数据规定在多少秒以后才进行数据加载,以免数据多次异步导致结果不受控制(即不知道什么时候结果能回来)
这种情况在移动端开发也比较常见,因此mark一下

以下实例的前提是 =>后台对数据查询做了分页处理

页面效果

image.png

页面结构

业务逻辑

getData (type) {
      if (this.CurrentIndex === '0') {
        this.List3 = []
      }
      const params = {
        BankName: this.BankName, // 中国银行名称关键字（支持模糊查询）
        CurrentIndex: this.CurrentIndex.toString(),
        PageSize: '10'
      }
      this.$http.post('/eweb/eweb-transfer.BankQry.do', params).then(res => {
      // 对异步加载数据做处理,否则出bug ---- 把快速触发的getData的异步数据多次加在一起
        if(type === 'watch'){
          this.List3 = []
          this.List3 = res.BankList
        }else{
           this.List3 = this.List3.concat(res.BankList)
        }
        this.CurrentIndex++
        this.$nextTick(() => {
          this.$refs.mescroll.mescroll.endSuccess(this.List3.length, this.List3.length < Number(res.TotalCount))
          // this.$refs.mescroll.mescroll.endBySize(this.List3.length, Number(res.TotalCount)) // 后台返回hasNextPage告知是否有下一页，或者前端这边自己判断
        })
      }).catch(() => {
        this.$refs.mescroll.mescroll.endErr()
      })
    },

这里对异步数据做处理,如果是watch侦听到数据变化,则需要将list清空,因此给了个type判断,这样防止watch数据快速变化时,异步加载的数据有可能未及时回来(其实是不知道异步数据什么时候回来)第一次list清空了,后续第二次第三次第四次等不断触发加载的时候,CurrentIndex加1,这时,则不符合index=== '0'的判断,所以list3会多加一次或者多次异步加载回来的数据
正是因为异步加载,导致数据未回来,又做了一次新的数据getData,等上一次数据回来后,如果没有if判断,只有这一句代码 this.List3 = this.List3.concat(res.BankList) ,这样会把后续几次触发的数据都list3里

watch数据变化

watch: {
    search (val) {  // 需要注意,这里不给if判断,只要数据有变化,不管有值还是为空,都作处理
        this.CurrentIndex = '0'
        this.BankName = val
        this.List3 = []
        this.getData('watch')
    }
  },