请求竞态问题

场景：

   1. 某一页面查询数据时，发起第一次请求

   2. 修改查询条件后，发起第二次请求

   3. 当第一次请求返回时间迟于第二次请求，此时第一次结果覆盖第二次页面结果，导致查询条件与展示结果不一致问题

解决方法：

1. 再次发起请求时，取消上次请求

   let controller = null;
   let loading = false;
   let timer = null;
   
   const getData01 = (time) => {
     if (loading) {
       controller.abort();
     }
   
     controller = new AbortController();
     loading = true;
   
     return fetch('http://localhost:7002', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
       },
       body: JSON.stringify({ time },),
       signal: controller.signal
     })
       .then(res => {
         loading = false;
         return res.json()
       })
       .catch(err => {
         return Promise.reject(err);
       })
   }
   
   // click触发
   let t = 5;
   const handleClick = () => {
      timeDom.innerText = `次数：${t}`;
       getData01(t).then((data) => {
         const { message, } = data;
         fruitDom.innerText = `水果：${message}`;
       }).catch((err) => {
         console.log('err', err)
       });
       t--;
   }

    

2. 其他请求的解决方式   https://blog.csdn.net/xgangzai/article/details/131427694