Vue浅析axios二次封装与节流及防抖的实现

1. axios二次封装

在我们的Vue项目中，使用axios进行网络请求已经成为了非常常见的做法。为了更好的维护代码、方便复用，我们需要对axios进行二次封装，使其使用更方便、简洁。

在这个过程中，我们可以实现一些公共的功能，比如统一处理错误请求、设置请求头、拦截请求等等。例如：

import axios from 'axios'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.API_BASE_URL,
  timeout: 6000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
  // 设置请求头
  config.headers.Authorization = 'Bearer ' + getToken()
  return config
}, error => {
  console.log(error) // 错误处理
  Promise.reject(error)
})

// response拦截器
service.interceptors.response.use(response => {
  // 统一处理状态码
  if (response.status === 200) {
    return response.data
  } else {
    return Promise.reject(response)
  }
}, error => {
  console.log(error) // 错误处理
  return Promise.reject(error)
})

export default service

这样，在以后我们需要发送请求时，只需要引入封装过的axios实例即可。

2. 节流与防抖的实现

当我们在页面使用频繁触发的事件（如input输入等），如果没有做相应的处理，很容易导致页面性能下降。这时候，我们可以借助节流和防抖的方法来避免出现这种情况。

2.1 节流

节流的基本思路是，在一定的时间内，只执行一次函数。在Vue中，可以借助lodash库来实现节流功能。例如：

<template>
  <div>
    <input type="text" v-model="value" @input="checkInputValue" />
  </div>
</template>

<script>
import { throttle } from 'lodash'

export default {
  data () {
    return {
      value: ''
    }
  },
  methods: {
    // 节流事件处理函数
    handleInputValue () {
      // 处理逻辑
      // ...
    },
    // 事件绑定节流处理
    checkInputValue: throttle(function () {
      this.handleInputValue()
    }, 500)
  }
}
</script>

2.2 防抖

防抖的基本思路是，在一定时间内，如果重复触发了同一函数，则只会执行一次。在Vue中，我们可以根据需要，手写实现防抖功能。例如：

<template>
  <div>
    <input type="text" v-model="value" @input="checkInputValue" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: ''
    }
  },
  methods: {
    // 防抖事件处理函数
    handleInputValue: function (event) {
      // 处理逻辑
      // ...
    },
    // 事件绑定防抖处理
    checkInputValue: function (event) {
      const delay = 500
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.handleInputValue(event)
      }, delay)
    }
  }
}
</script>

以上就是Vue浅析axios二次封装与节流及防抖的实现的完整攻略，希望能够帮到你。