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

在前端开发中，我们经常需要使用到Ajax请求来获取数据，而在使用Axios这个库时，我们会发现在某些情况下，频繁地发起请求会给服务器带来压力，甚至会导致服务器崩溃。为了解决这个问题，我们可以使用防抖和节流的技术来减少请求的次数，从而提高前端开发的效率。

防抖和节流是什么？

防抖和节流是两种常见的前端优化技术，它们都是为了减少函数执行次数，从而提高性能。它们的区别在于：

• 防抖：在一定时间内多次触发同一个函数，只执行最后一次。
• 节流：在一定时间内多次触发同一个函数，只执行一次。

Vue + Axios全局接口防抖、节流封装实现

在Vue项目中，我们可以通过封装Axios库来实现全局接口防抖和节流。具体实现步骤如下：

1. 创建一个api.js文件，用于封装Axios库：

import axios from 'axios';

// 创建一个axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});

// request拦截器
service.interceptors.request.use(
  config => {
    // 在请求发送之前做一些处理
    return config;
  },
  error => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

// response拦截器
service.interceptors.response.use(
  response => {
    // 在接收响应做一些处理
    return response.data;
  },
  error => {
    // 处理响应错误
    return Promise.reject(error);
  }
);

export default service;

2. 在main.js中引入api.js文件，并将其挂载到Vue原型上：

import Vue from 'vue';
import App from './App.vue';
import api from './api';

Vue.config.productionTip = false;

// 将api挂载到Vue原型上
Vue.prototype.$api = api;

new Vue({
  render: h => h(App),
}).$mount('#app');

3. 在需要使用接口的地方，使用this.$api.get()或this.$api.post()来发起请求：

export default {
  data() {
    return {
      list: []
    };
  },
  methods: {
    getList() {
      this.$api.get('/api/list').then(res => {
        this.list = res.data;
      });
    }
  }
};

4. 在api.js文件中添加防抖和节流的方法：

// 防抖
let timer = null;
const debounce = (fn, delay) => {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    fn.apply(this, arguments);
  }, delay);
};

// 节流
let canRun = true;
const throttle = (fn, delay) => {
  if (!canRun) {
    return;
  }
  canRun = false;
  setTimeout(() => {
    fn.apply(this, arguments);
    canRun = true;
  }, delay);
};

// 将防抖和节流方法添加到api.js文件中
const service = axios.create({
  ...
});

service.interceptors.request.use(
  config => {
    if (config.method === 'get') { // 只对get请求进行防抖和节流处理
      config.params = {
        ...config.params,
        t: new Date().getTime() // 添加时间戳，防止缓存
      };
      debounce(() => { // 防抖处理
        return config;
      }, 500);
      throttle(() => { // 节流处理
        return config;
      }, 500);
    }
    return config;
  },
  ...
);

5. 最后，在需要使用防抖和节流的地方，直接调用this.$api.get()或this.$api.post()方法即可。

总结

通过封装Axios库，我们可以很方便地实现全局接口防抖和节流。这不仅可以减少请求次数，提高性能，还可以让我们的前端开发更加高效。希望本文能够帮助到大家。