如果多次点击请求同一接口,因为请求是异步的,可能会导致结果最后渲染为上一次搜索的结果,为了避免这种情况
第一步 在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。