Quickly click to request the same interface multiple times, so that the rendering result is the result of the last request

If you click to request the same interface multiple times, because the request is asynchronous , the result may be rendered as the result of the previous search, in order to avoid this situation

The first step is to declare a field in data, let this field be 0

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

The second step is to judge in the request interface event in the method

After the interface returns, it is judged whether the keys and a are equal. If they are equal, it means that it is the last request, and then data processing is performed. Return if keys are not equal to a.

 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;
        });
    },
}

 The keys in data: 0, is a global variable

The keys in methods are a local variable

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

Logic verification: the first request is sent, keys++ is 1, a is 1, the request time is longer, and the second request is continued; the second request is sent, keys++ is 2, the request time is shorter, and the second request is issued immediately The requested data, at this time a = this.keys is 2; at this time the first request is completed, since the keys in data are global variables, the a in the first request is 2 at this time.