vue axios 全局节流防抖

在 Vue 中使用 Axios 进行请求时，可以通过在 Vue 的原型中设置 Axios 的实例来实现全局节流防抖。

节流和防抖的作用是为了减少请求的发送次数，提高性能。节流是在一定时间内只发送一次请求，而防抖是在最后一次操作后等待一段时间再发送请求。

以下是一个实现全局节流防抖的示例代码：

import axios from 'axios'
import _ from 'lodash'

// 设置全局节流时间
const THROTTLE_TIME = 1000

// 设置全局防抖时间
const DEBOUNCE_TIME = 500

// 创建 Axios 实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000
})

// 设置请求拦截器
instance.interceptors.request.use(
  config => {
    // 在请求发送前进行节流处理
    config.throttleCancelToken = _.throttle(cancel => cancel(), THROTTLE_TIME)
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 设置响应拦截器
instance.interceptors.response.use(
  response => {
    return response
  },
  error => {
    return Promise.reject(error)
  }
)

// 将 Axios 实例设置为 Vue 的原型
Vue.prototype.$http = instance

// 在全局混入对象中设置防抖函数
Vue.mixin({
  methods: {
    debounce(fn, wait = DEBOUNCE_TIME) {
      let timeout = null
      return function(...args) {
        if (timeout !== null) {
          clearTimeout(timeout)
        }
        timeout = setTimeout(() => {
          fn.apply(this, args)
        }, wait)
      }
    }
  }
})

在这个示例代码中，首先使用 `import` 引入了 Axios 和 Lodash 库。然后创建了一个 Axios 实例，并设置了全局节流时间和全局防抖时间。接下来，在请求拦截器中使用 `throttle` 函数对取消请求函数进行节流处理，以减少请求发送的次数。最后，将 Axios 实例设置为 Vue 的原型，以便在组件中使用。

除此之外，在全局混入对象中还设置了一个 `debounce` 函数，用于在组件中进行防抖处理。这个函数接收一个函数和一个等待时间作为参数，返回一个新的函数，在等待时间内多次调用该函数时，只会执行最后一次调用，并在等待时间结束后执行一次。

这样，在组件中使用 Axios 进行请求时，可以通过调用 `$http` 对象来发送请求，并使用 `debounce` 函数对请求进行防抖处理，以提高性能。