Vue + Axios全局接口防抖节流，助你实现前端开发高效率！

什么是接口防抖和节流？

前端开发中，大量的数据请求可能会导致页面卡顿、延迟等问题。为了解决这个问题，需要对接口进行防抖 和节流 处理，以在适当的时机发送请求，提高应用程序的响应速度和性能。

接口防抖 ：在一定时间内，如果用户连续触发某个事件，则只执行一次该事件处理函数。例如，在输入框中输入文字时，防抖可以防止在每次按键时都发送请求，而是等到用户停止输入一段时间后再发送请求。

接口节流 ：在一定时间内，如果用户连续触发某个事件，则只执行一次该事件处理函数，但会将所有触发事件的请求收集起来，在规定时间内只发送一次请求。例如，在滚动页面时，节流可以防止在每次滚动时都发送请求，而是每隔一段时间发送一次请求。

Vue + Axios全局接口防抖和节流封装

为了方便在 Vue 中使用防抖和节流，可以创建一个全局工具类：

代码示例：

import Vue from 'vue'
import Axios from 'axios'

const DebounceThrottle = {
  install(Vue) {
    Vue.prototype.$debounce = this.debounce
    Vue.prototype.$throttle = this.throttle
  },
  debounce(func, delay) {
    let timer = null
    return function(...args) {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        func.apply(this, args)
        timer = null
      }, delay)
    }
  },
  throttle(func, delay) {
    let timer = null
    let isWaiting = false
    return function(...args) {
      if (timer) {
        isWaiting = true
        return
      }
      timer = setTimeout(() => {
        func.apply(this, args)
        timer = null
        if (isWaiting) {
          func.apply(this, args)
          isWaiting = false
        }
      }, delay)
    }
  }
}

Vue.use(DebounceThrottle)

使用方式：

this.$debounce(() => {
  // 防抖处理后的代码
}, 500)

this.$throttle(() => {
  // 节流处理后的代码
}, 1000)

注意事项

• 防抖和节流的延迟时间需要根据实际情况进行调整，太短可能会导致请求过于频繁，太长可能会影响用户体验。
• 在使用防抖和节流时，需要注意避免重复触发事件，否则可能会导致不必要

常见问题解答

1. 什么时候使用防抖和节流？

   • 防抖适用于用户连续触发事件时，需要一段时间后才执行一次处理函数。
   • 节流适用于用户连续触发事件时，需要在一定时间内只执行一次处理函数。

2. 防抖和节流有什么区别？

   • 防抖只执行一次处理函数，而节流会收集所有触发事件的请求，在规定时间内只发送一次请求。

3. 如何设置防抖和节流的延迟时间？

   • 延迟时间需要根据实际情况进行调整，一般来说，对于用户体验有较高的要求，延迟时间可以短一些，对于请求比较频繁的场景，延迟时间可以长一些。

4. 如何避免重复触发事件？

   • 在使用防抖和节流时，需要注意避免重复触发事件，否则可能会导致不必要的请求。可以使用防抖和节流的函数来控制事件的触发频率。

5. 防抖和节流可以在哪些场景中使用？

   • 输入框输入
   • 页面滚动
   • 按钮点击
   • 鼠标移动