数据覆盖

2023年05月11日

柏拉文

越努力，越幸运

一、认识

---

前端同一个接口频繁调用, 在网络不好的情况下, 会发生一下场景:

• 场景一: 当我们在请求列表数据的时候，在翻页的时候出现上次请求的时长大于最新请求的时长，出现了覆盖最新请求的数据的问题

• 场景二: 在做项目时候发现，一个页面中有多个Tab，每个Tab对应的数据调用的是同一个接口，参数不同，在快送切换Tab时，展示的是前一个请求返回的数据

造成了数据覆盖、混乱的问题, 所以我们的做法是: 前端同一个接口频繁调用，只处理最后一次返回

二、方案

---

2.1 中断请求

2.2 交互限制

一旦调用接口之后, 立马展示 Loading , 不让用户继续点击

2.3 请求标记

请求记录: 利用函数作用域的特点, 为请求函数传入全局状态标记。之后在我们每一次调用请求函数的同时, 更新全局状态标记, 此时, 请求函数中还是维持着各自调用时传入的状态。

<template>
  <div>
    <button @click="handleRequest">按钮</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const currentTime = ref(0);

function requestFun(){
  return new Promise((resolve)=>{
    setTimeout(()=>{
      resolve("接口数据");
    },2000);
  });
}

function test(time){
  requestFun().then(res=>{
    if(currentTime.value === time){
      console.log(res)
    }
  });
}

const handleRequest = ()=>{
  currentTime.value = +new Date();
  test(currentTime.value);
}
</script>