vue公共组件封装只有请求web接口命名不一致如何封装？

如果你的 Vue 公共组件封装中有请求 web 接口的功能，但是不同的接口命名不一致，可以考虑将这些接口的命名统一封装到一个配置文件中，然后在组件中引用这个配置文件。

具体实现步骤如下：

1. 创建一个配置文件，比如 config.js，将所有接口命名都定义在这个文件中，例如：

export default {
  getUserInfo: '/api/userInfo',
  getBookInfo: '/api/bookInfo',
  getMusicInfo: '/api/musicInfo'
}

2. 在需要请求接口的组件中引入这个配置文件，例如：

import config from '@/config.js'

// 然后在组件中使用
axios.get(config.getUserInfo)

这样就可以实现对不同接口命名的统一封装，方便后续维护和修改。

相关问题

vue3+ts封装axios请求接口

对于Vue3 TS封装axios请求接口，你可以按照以下步骤进行操作：

1. 首先，安装axios和@types/axios包。你可以使用npm或者yarn进行安装。
2. 创建一个api文件夹，用于存放所有的接口请求。
3. 在api文件夹中创建一个request.ts文件，用于封装axios请求方法。
4. 在request.ts文件中，引入axios和创建一个axios实例。
5. 创建一个基础的请求方法，用于发送各种类型的请求（GET、POST等）。
6. 在api文件夹中创建一个具体的接口文件，例如user.ts，用于存放用户相关的接口请求。
7. 在user.ts文件中，引入request.ts文件中的请求方法，并根据需要封装各种具体的接口请求方法。
8. 在Vue组件中，引入user.ts文件中的接口请求方法，并调用相应的方法进行接口请求。

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。这样可以确保在请求未完成之前不会发起新的请求。