快速点击多次请求同一个接口,让渲染结果为最后一次请求的结果

如果多次点击请求同一接口,因为请求是异步的,可能会导致结果最后渲染为上一次搜索的结果,为了避免这种情况

第一步  在data里声明一个字段,让这个字段为0

data() {
    return {
       keys: 0, //定义一个字段keys
    };
}

第二步  在方法里的请求接口事件里去进行判断

在接口返回后判断keys与a是否相等,若相等,说明是最后一次请求,则进行数据处理。如果keys与a不相等,则return。

 methods: {
     /**
     * @description 查询table list
     * */
    handleTable(form, params) {

      // 判断keys与a是否相等;
      this.keys++;
      let a = this.keys;

      api.dfpSearch({
          ...form,
          ...params,
        })
        .then((res) => {
          // console.log(a, 11);
          // console.log(this.keys, 22);

          if (a != this.keys) {
            return;
          }
          this.tableData = res.data.list;
          this.total = res.data.paging.total;
        });
    },
}

 data里的keys: 0,是一个全局变量

methods里的keys是一个局部变量

this.keys ++;
let a = this.keys;

逻辑验证:第一次发出请求,keys++为1,a为1,请求时间较长,继续发出第二次请求;第二次发出请求,keys++为2,请求时间较短,立即渲染第二次发出请求的数据,此时a = this.keys为2;此时第一次请求完成,由于data里的keys是全局变量,这时第一次请求里的a为2。

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值