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

你是否有过这样的经历，每当你在前端开发中使用 Ajax 进行数据请求时，往往因为一些错误操作导致页面不断地发送请求，甚至导致了系统崩溃？为了解决这个问题，我们需要对接口进行防抖和节流处理。

本文将介绍如何使用 Vue 和 Axios 对接口进行防抖和节流处理，并详细介绍其实现原理以及注意事项。让我们开始吧！

什么是接口防抖和节流？

接口防抖和节流是网站性能优化方案的重要组成部分之一。简单来说，防抖是指在特定的时间内只执行一次函数，而节流是指在一个时间段内才执行一次函数。

在前端开发中，通过接口防抖和节流可以有效减少网络请求和服务端负载。通过编写防抖和节流代码的方式，可以确保前端页面不会出现过多的请求数量，从而使网页加载速度更快、响应更灵敏。

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

在 Vue 中，可以通过创建一个全局的 axios 实例来封装接口请求。下面我们将根据需求，对 axios 实例进行编写，实现防抖和节流功能。

防抖

在实现防抖之前，我们先来介绍一下什么是“防抖”。在前端开发中，“防抖”指的是在一定时间内只能触发一次事件，通常是输入框或滚动事件。假如没有防抖控制，页面会出现一些异常情况，例如：搜索框输入过快、滚动条跳动频繁等。

实现原理

防抖的实现原理非常简单，就是通过对要执行的函数进行延迟处理，以此来控制函数执行的次数。具体流程如下：

定义一个变量用于保存计时器。
在函数执行前判断计时器是否存在，如果存在则清除计时器。
为函数设置时间延迟，将返回结果保存到计时器变量中。
等待时间超过设定的阈值后，执行相应的回调函数。

下面是防抖代码的示例：

// 防抖
function debounce(fn, delay = 500) {
  let timer = null;
  return function(...args) {
    if (timer !== null) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };
}

注意事项

在使用防抖技术的时候，需要注意以下几点：

时间延迟需要根据业务需求进行调整。
在防抖过程中，要确保函数参数传递正确。

节流

相比于防抖技术，节流技术更加灵活。在前端开发中，“节流”通常指的是在一定时间内只能执行一次事件，例如：下拉加载更多、页面滚动等。

实现原理

节流技术的实现原理也非常简单，就是通过设置一个固定时间间隔，在这个时间间隔内只能执行一次相应的回调函数。具体流程如下：

定义一个变量用于保存上一次执行函数的时间。
在执行函数前获取当前的时间戳。
判断当前时间与上一次执行时间是否大于设定的间隔时间，如果大于，则执行相应的回调函数，并更新上一次执行时间。
如果小于设定的间隔时间，则等待下一次执行。

下面是节流代码的示例：

// 节流
function throttle(fn, delay = 500) {
  let last = 0;
  return function(...args) {
    let now = new Date().getTime();
    if (now - last > delay) {
      last = now;
      fn.apply(this, args);
    }
  };
}

注意事项

在使用节流技术的时候，需要注意以下几点：

时间间隔需要根据业务需求进行调整。
在节流过程中，要确保函数参数传递正确。
节流过程中可能会出现滞后或者丢失部分事件的问题，需要进行相应的处理。

封装axios实例

在 Vue 中，可以通过创建一个全局的 axios 实例来封装接口请求。下面我们将根据需求，对 axios 实例进行编写，实现防抖和节流功能。

首先，我们需要安装 axios 插件：

npm install axios --save

然后，在 main.js 中添加以下代码：

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

Vue.prototype.$http = axios

接下来，我们将编写一个封装函数，用于通过 axios 实例对接口进行防抖和节流处理。

防抖处理

在防抖处理中，我们需要考虑以下几个方面：

将 axios 实例封装为一个函数。
在函数调用时进行防抖处理。

下面是封装 axios 实例的示例代码：

import axios from 'axios'

function request(config) {
  const instance = axios.create({
    baseURL: 'http://localhost:3000/api',
    timeout: 10000
  })

  // 防抖
  const debounceTokenCancel = new Map()
  instance.interceptors.request.use(config => {
    const tokenKey = `${config.method}-${config.url}`
    const cancel = debounceTokenCancel.get(tokenKey)
    if (cancel) {
      cancel()
    }
    return config
  }, error => {
    console.log(error)
    return Promise.reject(error)
  })

  instance.interceptors.response.use(response => {
    return response
  }, error => {
    console.log(error)
    return Promise.reject(error)
  })

  return instance(config)
}

export default request

在上述代码中，我们创建了一个 axios 实例，并对该实例进行了防抖处理。其中，debounceTokenCancel 变量用于保存每个请求的计时器对象。在拦截器中，我们通过判断 debounceTokenCancel 中是否存在相应的 key，来决定是否清除计时器和重新设置计时器。

节流处理

在节流处理中，我们需要考虑以下几个方面：

将 axios 实例封装为一个函数。
在函数调用时进行节流处理。

下面是封装 axios 实例的示例代码：

import axios from 'axios'

function request(config) {
  const instance = axios.create({
    baseURL: 'http://localhost:3000/api',
    timeout: 10000
  })

  // 节流
  let lastTime = new Date().getTime()
  instance.interceptors.request.use(config => {
    const nowTime = new Date().getTime()
    if (nowTime - lastTime < 1000) {
      return Promise.reject(new Error('节流处理中，稍后再试'))
    }
    lastTime = nowTime
    return config
  }, error => {
    console.log(error)
    return Promise.reject(error)
  })

  instance.interceptors.response.use(response => {
    return response
  }, error => {
    console.log(error)
    return Promise.reject(error)
  })

  return instance(config)
}

export default request

在上述代码中，我们创建了一个 axios 实例，并对该实例进行了节流处理。其中，lastTime 变量用于保存上一次请求的时间。在拦截器中，我们通过比较当前时间和上一次请求的时间，来决定是否进行节流处理。

一个完整示例

下面是一个完整的示例代码，包括了防抖和节流：

import axios from 'axios'

function request(config) {
  const instance = axios.create({
    baseURL: 'http://localhost:3000/api',
    timeout: 10000
  })

// 防抖
const debounceTokenCancel = new Map()
instance.interceptors.request.use(config => {
  const tokenKey = `${config.method}-${config.url}`
  const cancel = debounceTokenCancel.get(tokenKey)
  if (cancel) {
    cancel()
  }
  return new Promise(resolve => {
    const timer = setTimeout(() => {
      clearTimeout(timer)
      resolve(config)
    }, 800)
    debounceTokenCancel.set(tokenKey, () => {
      clearTimeout(timer)
      resolve(new Error('取消请求'))
    })
  })
}, error => {
  console.log(error)
  return Promise.reject(error)
})

instance.interceptors.response.use(response => {
  return response
}, error => {
  console.log(error)
  return Promise.reject(error)
})

// 节流
let lastTime = new Date().getTime()
instance.interceptors.request.use(config => {
  const nowTime = new Date().getTime()
  if (nowTime - lastTime < 1000) {
    return Promise.reject(new Error('节流处理中，稍后再试'))
  }
  lastTime = nowTime
  return config
}, error => {
  console.log(error)
  return Promise.reject(error)
})

return instance(config)
}

export default request

在上述代码中，我们创建了一个 axios 实例，并对该实例进行了防抖和节流处理。其中，debounceTokenCancel 变量用于保存每个请求的计时器对象；lastTime 变量用于保存上一次请求的时间。

结论

在前端开发中，通过对接口进行防抖和节流处理可以有效减少网络请求和服务端负载，提升网站性能。本文中，我们介绍了如何使用 Vue 和 Axios 对接口进行防抖和节流处理，并详细介绍了实现原理以及注意事项。希望这篇文章可以帮助你更好地完成开发工作。