axios请求后端接口防抖
防抖是一种常见的前端优化技术，用于限制函数重复执行的频率。当用户频繁触发某个事件时，防抖可以将多次触发的事件合并为一次执行，避免不必要的资源消耗。在使用axios发送请求时，我们可以结合防抖技术，减少不必要的请求，提升前端性能。
什么是防抖
防抖是一种限制函数执行频率的技术，它会延迟函数执行，直到一定时间内没有再次触发该函数。在前端开发中，用户的操作可能会频繁触发某个事件，例如滚动页面、输入框输入、按钮点击等。如果每次触发事件都立即执行相应的操作，可能会导致频繁的资源请求和计算，影响页面性能。
防抖的原理很简单，当事件触发时，设置一个定时器，延迟执行函数。如果在延迟时间内再次触发该事件，则清除之前的定时器，重新设置新的定时器。只有当延迟时间内没有再次触发事件时，函数才会执行。
使用axios发送请求
在前端开发中，我们经常使用axios库来发送HTTP请求。axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中使用。它具有简洁的API和强大的功能，非常适合用来发送异步请求。
首先，我们需要在项目中引入axios库。可以使用npm或yarn安装axios，然后在代码中使用import语句引入axios模块。
import axios from 'axios';
接下来，我们可以使用axios发送GET、POST等请求到后端接口。axios的API非常简单，只需要传入一个配置对象，即可发送请求。
axios.get('/api/data')
.then(response => {
console.log(response);
})
.catch(error => {
console.error(error);
});
上面的代码中，我们发送了一个GET请求到/api/data接口，并在控制台输出了响应结果。axios返回的是一个Promise对象，我们可以使用then方法处理成功的响应，使用catch方法处理失败的情况。
防抖的实现
要实现防抖功能，我们可以使用JavaScript提供的setTimeout函数来延迟函数执行。在每次触发事件时，我们设置一个定时器，在延迟时间内再次触发事件时，清除之前的定时器，重新设置新的定时器。
下面是一个简单的防抖函数的实现：
function debounce(fn, delay) {
let timer = null;
return function() {
clearTimeout(timer);
timer = setTimeout(fn, delay);
}
}
上面的代码中，我们定义了一个名为debounce的函数，接收一个函数和延迟时间作为参数。在返回的函数中，每次触发事件时，清除之前的定时器，并设置一个新的定时器，在延迟时间后执行传入的函数。
使用防抖函数包装我们的事件处理函数后，就可以实现函数的防抖效果。例如，我们可以在用户输入框输入时，延迟发送搜索请求，避免用户输入过程中频繁触发搜索请求。
const inputElement = document.getElementById('search-input');
const search = debounce(() => {
const keyword = inputElement.value;
axios.get('/api/search', { params: { keyword } })
.then(response => {
console.log(response);
})
.catch(error => {
console.error(error);
});
}, 300);
inputElement.addEventListener('input', search);
上面的代码中，我们在用户输入框输入时，调用了防抖函数debounce，并传入了一个请求函数和延迟时间。当用户输入时，防抖函数会延迟执行请求函数，直到用户停止输入一段时间后才触发请求。
序列图
下面是一个使用axios发送请求防抖的序列图示例：
sequenceDiagram
participant User
