axios + 防抖的失败经历：攻坚难缠的重复请求

见解分享

2023-11-12 10:33:45

周六的早晨，阳光透过百叶窗的缝隙洒进我的房间，我被闹钟吵醒。又是一周的开始，我伸了个懒腰，打开了电脑，准备开始一天的工作。

今天要做的任务是将一个新的功能添加到公司的网站上。这个功能需要使用axios和防抖来实现。axios是一个用于发送HTTP请求的JavaScript库，而防抖是一种技术，可以防止函数在一段时间内被多次调用。

我按照既定的步骤开始编码，一切似乎都很顺利。但是，当我在浏览器中测试这个功能时，却遇到了一个问题：当我点击按钮时，函数被调用了两次。

我检查了代码，发现我确实只调用了一次函数。但是，当我查看网络请求时，却发现确实发送了两次请求。这让我感到很困惑。

我尝试了很多方法来解决这个问题，但都没有成功。我甚至重新安装了axios和防抖库，但问题仍然存在。

就在我快要放弃的时候，我突然想到，可能是因为后台的数据有问题。于是我联系了后台小姐姐，询问她是否知道这个问题。

果然，后台小姐姐告诉我，甲方网卡了，导致前端发送了两次请求。

我长舒了一口气，终于找到了问题的根源。我修改了代码，让它在发送请求之前先检查一下数据是否已经存在。如果数据已经存在，则不发送请求。

问题解决了，我继续完善这个功能。到了下午，这个功能终于上线了。

这次经历让我学到了一个教训：在遇到问题时，不要只盯着代码，还要考虑一下后台的数据。同时，也要学会使用调试工具来定位问题。

问题分析

这个问题的根源在于甲方网卡导致前端发送了两次请求。当前端发送第一次请求时，后台还没有收到请求。当前端发送第二次请求时，后台收到了两次请求。

解决方案

为了解决这个问题，我修改了代码，让它在发送请求之前先检查一下数据是否已经存在。如果数据已经存在，则不发送请求。

const axios = require('axios');

const debounce = (func, delay) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func(...args);
    }, delay);
  };
};

const getData = () => {
  return axios.get('/api/data');
};

const debouncedGetData = debounce(getData, 500);

const handleClick = () => {
  debouncedGetData().then((response) => {
    console.log(response.data);
  });
};