vue2 统一封装接口请求 防重

为了在Vue2中统一封装接口请求并防止重复请求，您可以使用以下方法：

1. 创建一个api.js文件，用于封装所有的接口请求方法。

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://your-api-url.com',
  // 其他配置项
});

export function fetchData(params) {
  return api.get('/data', { params });
}

// 其他接口请求方法

2. 在Vue组件中使用封装的接口请求方法。

import { fetchData } from './api.js';

export default {
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 防止重复请求
      if (this.loading) {
        return;
      }
      
      this.loading = true;

      fetchData({ /* 请求参数 */ })
        .then(response => {
          // 处理响应数据
        })
        .catch(error => {
          // 处理错误
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};

通过以上方法，您可以在Vue组件中调用封装的接口请求方法，并且使用loading属性来防止重复请求。当请求开始时，将loading设置为true，请求结束后将loading设置为false。这样可以确保在请求未完成之前不会发起新的请求。