多次请求只保持最后一次的结果

最近项目总结，如果一个输入框和一个搜索按钮，点击查询的时候，需要发起请求获取数据，因为请求是异步的，则无法获取哪一次的请求是最后一次的请求，则可以进行一下操作优化：

思路一：请求外部存在一个变量，记录每次请求的标记值；可以将外部的标记值传入调用请求的内部，因为函数有作用域的概念，所以暂时目前传入的数据是会一直存在于该作用域内部的，但是外部的标记值会一直变化，当是最后一次请求的时候，外部的值和内部接收的值是相同的，可以在此处进行数据处理。

vue代码如下：

<template>
  <div class="root">
    <input type="text" v-model="inputData" />
    <button @click="handleSearch">搜搜</button>
    <ul v-for="item in appList" :key="item.value">
      <li>{{ item.label }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputData: "",
      appList: [],
      time: "",
    };
  },
  methods: {
    handleSearch() {
      this.time = new Date().getTime(); //主要是这里，记录当前点击的时间戳
      this.sendRequestFunc(this.time);
    },
    sendRequestFunc(timer) {
      this.sendRequest("/microx-user/admin/org-info/all",{content:this.inputData}).then((res) => {
        if (timer == this.time) {
          //因为函数有作用域的概念，所以上一次点击的时候会开辟一个新的空间，保留上一次传入的数据，但是外部的数据会实时发生变化
          console.log(
            "有响应之后的最后一次数据处理可在这里进行",timer, this.time
          );
          /* 
              此处进行数据处理
          */

          this.appList = [];
          if (res.returnCode == 0) {
            res.body.forEach((item) => {
              var obj = {
                label: item.orgName,
                value: item.orgId,
              };
              this.appList.push(obj);
            });
          } else {
            this.$message.error(res.returnMsg);
          }
        } else {
          console.log("证明不是最后一次请求", timer, this.time);
        }
      });
    },
  },
};
</script>
<style scoped>
.root {
  width: 1000px;
  height: 1000px;
  background: cyan;
}
</style>

弱网环境模拟结果展示：

 

 值得注意的是：这里一定是上一次请求没有回来，才会进行这种处理操作！！

基于这个思路，可以使用其他的标记值，如内部自定义1,2,3,4,5，……，或者哈希值等等，但是最好还是用时间戳，因为时间戳可以看一下大小值，也算是一个好处吧

思路二：

每次请求需要携带一个标记值，假设取用的是时间戳，然后全局存储时间戳，需要协调后台对此标记值返回，此时比较全局变量和响应中的标记值，即可判断是否是最后一次的请求结果了。

 大概思路就是这样，但是这种方法需要后台支持，并且返回的标记值即是请求的请求数据之一，所以大概率会被拒绝这样的需求，所以还是建议第一种方法。

完结！！！