Vue + Axios全局接口防抖、节流封装实现，让你前端开发更高效

Vue + Axios 全局接口防抖、节流封装实现的讲解：
 
防抖（Debounce）
 
防抖的核心概念是在一系列快速连续的事件触发中，只有在事件停止触发一段时间后，才执行相应的操作。这对于接口请求来说，可以避免在用户短时间内频繁操作（如快速点击按钮）时，频繁发送不必要的请求。
 
首先，我们来详细剖析一下防抖函数的实现：
 
 

function debounce(func, delay) {
  let timer;  // 用于存储定时器的引用

  return function (...args) {
    clearTimeout(timer);  // 每次新的触发都清除之前设置的定时器

    timer = setTimeout(() => {
      func.apply(this, args);  // 当在指定的延迟时间内没有新的触发时，执行传入的函数
    }, delay);
  };
}

 
 
在 Vue 项目中，假设我们有一个用于发送 Axios 请求的函数  sendRequest ：
 
 

function sendRequest(url, data) {
  axios.post(url, data)
  .then(response => {
      console.log('请求成功：', response.data);
    })
  .catch(error => {
      console.error('请求失败：', error);
    });
}

 
 
接下来，对  sendRequest  函数进行防抖封装：
 
 

const debouncedSendRequest = debounce(sendRequest, 500);  // 这里设置防抖的延迟时间为 500 毫秒

 
 
在实际使用场景中，比如在一个按钮的点击事件处理函数中：
 
 

<button @click="handleClick">发送请求</button>

 
 
 

methods: {
  handleClick() {
    debouncedSendRequest('/api/someEndpoint', { someData: 'value' });
  }
}
 

 
当用户快速点击按钮时， debouncedSendRequest  函数会不断清除之前设置的定时器，只有在最后一次点击后的 500 毫秒内没有新的点击，才会真正执行  sendRequest  函数发送请求。
 
节流（Throttle）
 
节流的关键在于限制操作的执行频率，确保在固定的时间间隔内，无论触发多少次，操作只会执行一次。
 
详细分析节流函数的实现：
 
 

function throttle(func, delay) {
  let lastExecutedTime = 0;  // 记录上次执行的时间

  return function (...args) {
    const currentTime = new Date().getTime();  // 获取当前时间

    if (currentTime - lastExecutedTime >= delay) {  // 判断当前时间与上次执行时间的间隔是否大于设定的延迟时间
      func.apply(this, args);  // 执行传入的函数
      lastExecutedTime = currentTime;  // 更新上次执行时间
    }
  };
}

 
 
同样以  sendRequest  函数为例进行节流封装：
 
 

const throttledSendRequest = throttle(sendRequest, 1000);  // 设置 1000 毫秒的节流间隔

 
 
在实际使用中，比如在页面滚动事件中：
 
 

window.addEventListener('scroll', () => {
  throttledSendRequest('/api/scrollDataEndpoint', { scrollPosition: window.pageYOffset });
});

 
 
在滚动过程中，无论滚动事件触发多么频繁， throttledSendRequest  函数每 1000 毫秒最多只会执行一次发送请求的操作。
 
为了在整个 Vue 项目中方便地使用防抖或节流的请求函数，可以将其封装在一个单独的模块中，并通过 Vue 的全局混入（mixin）或者在特定的 Vuex 模块中进行管理和共享。