vue 如何给每一个接口增加防止重复点击的功能，在接口数据未返回之前不允许再触发？

在 Vue 中，为每个 API 接口添加防重复点击的功能可以通过以下几种方法实现：

1. **事件队列（Event Dequeuing）**:
在调用 API 之前，你可以先创建一个异步处理函数（比如 `fetchData`），并阻止其内部的点击事件直到请求完成。当用户再次点击时，检查当前是否已经在请求中，如果是，则不执行新的请求。

data() {
  return {
    isFetching: false,
    data: null,
  };
},
methods: {
  fetchData() {
    if (this.isFetching) {
      // 阻止默认行为（如跳转或提交）
      event.preventDefault();
      return;
    }
    this.isFetching = true;

    // 发起 API 请求
    axios.get('your-api-url')
      .then(response => {
        this.data = response.data;
        this.isFetching = false; // 请求完成后设置为false
      })
      .catch(error => {
        console.error(error);
        this.isFetching = false;
      });
  },
  // 其他方法...
}

2. **锁定状态（Locking State）**:
使用一个变量标记当前请求状态，并确保只有在该变量为 false 的时候才允许触发请求。

data() {
  return {
    locked: false,
    data: null,
  };
},
methods: {
  fetchData() {
    if (this.locked || this.isFetching) {
      return;
    }
    this.locked = true;
    
    // 请求过程中...
    axios.get('your-api-url')
      .then(response => {
        this.data = response.data;
        this.locked = false; // 请求成功后解锁
      })
      .catch(() => {
        this.locked = false; // 错误或取消请求后解锁
      });
  },
  // 其他方法...
}

这两种方法都利用了 Vue 的响应式系统和控制结构，保证了在数据返回前不会重复发送请求。在实际项目中，还可以配合 Vue Router 或 Axios 的拦截器进行更精细化的控制。