vue3 axios 全局节流防抖

在 Vue3 中，可以通过自定义插件的方式来实现全局的节流和防抖。以下是一个实现节流和防抖的插件示例：

import { throttle, debounce } from 'lodash'

const MyPlugin = {
  install: (app) => {
    app.config.globalProperties.$throttle = throttle
    app.config.globalProperties.$debounce = debounce
  }
}

export default MyPlugin

在插件中，我们引入了 Lodash 库中的节流和防抖函数。然后，将它们作为 Vue3 全局对象的属性，以便在整个 Vue3 应用程序中可以使用这些函数。

在使用时，我们可以在 Vue3 组件中通过 `$throttle` 和 `$debounce` 调用这些函数。例如，我们可以在发送请求时使用节流来限制请求的频率：

import { defineComponent } from 'vue'
import { useAxios } from '@/api'
import { useDebounce } from '@/plugins/my-plugin'

export default defineComponent({
  setup() {
    const { axiosInstance } = useAxios()
    const debouncedSearch = useDebounce((query) => {
      axiosInstance.get(`/search?q=${query}`)
        .then((response) => {
          // handle response
        })
    }, 500)

    const handleInput = (event) => {
      debouncedSearch(event.target.value)
    }

    return {
      handleInput
    }
  }
})

在上面的示例中，我们使用了 `$debounce` 函数来创建一个防抖函数 `debouncedSearch`，然后在输入事件处理程序中调用该防抖函数来限制请求的频率。