面试题：在 Vue 项目开发中，如何进行接口管理？

在 Vue 项目开发中，接口管理是一个重要的环节。良好的接口管理可以提高代码的可维护性、可读性和可扩展性。以下是常见的接口管理方式：

1. 集中管理 API 请求

将所有的 API 请求集中管理在一个或多个文件中，便于统一维护和修改。

示例：

// src/api/index.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
});

export default {
  // 用户相关接口
  getUser(id) {
    return apiClient.get(`/users/${id}`);
  },
  createUser(user) {
    return apiClient.post('/users', user);
  },

  // 文章相关接口
  getPosts() {
    return apiClient.get('/posts');
  },
  createPost(post) {
    return apiClient.post('/posts', post);
  },
};

在组件中使用：

import api from '@/api';

export default {
  methods: {
    async fetchUser() {
      try {
        const response = await api.getUser(1);
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    },
  },
};

2. 按模块划分 API

如果项目较大，可以按功能模块划分 API 文件，便于管理和维护。

示例：

// src/api/user.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
});

export default {
  getUser(id) {
    return apiClient.get(`/users/${id}`);
  },
  createUser(user) {
    return apiClient.post('/users', user);
  },
};

// src/api/post.js
export default {
  getPosts() {
    return apiClient.get('/posts');
  },
  createPost(post) {
    return apiClient.post('/posts', post);
  },
};

在组件中使用：

import userApi from '@/api/user';
import postApi from '@/api/post';

export default {
  methods: {
    async fetchUser() {
      const response = await userApi.getUser(1);
      console.log(response.data);
    },
    async fetchPosts() {
      const response = await postApi.getPosts();
      console.log(response.data);
    },
  },
};

3. 使用环境变量配置 API 地址

在开发、测试和生产环境中，API 地址可能不同。可以通过环境变量动态配置 API 地址。

示例：

// .env.development
VUE_APP_API_URL=https://dev.api.example.com

// .env.production
VUE_APP_API_URL=https://api.example.com

// src/api/index.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  timeout: 10000,
});

export default {
  getUser(id) {
    return apiClient.get(`/users/${id}`);
  },
};

4. 封装请求拦截器和响应拦截器

通过拦截器统一处理请求和响应，例如添加请求头、处理错误等。

示例：

// src/api/index.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  timeout: 10000,
});

// 请求拦截器
apiClient.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
apiClient.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response.status === 401) {
      // 处理未授权错误
      console.error('未授权，请重新登录');
    }
    return Promise.reject(error);
  }
);

export default {
  getUser(id) {
    return apiClient.get(`/users/${id}`);
  },
};

5. 使用 TypeScript 增强类型安全

如果项目使用 TypeScript，可以为 API 请求和响应定义类型，增强代码的类型安全性。

示例：

// src/api/types.ts
export interface User {
  id: number;
  name: string;
  email: string;
}

// src/api/user.ts
import axios from 'axios';
import { User } from './types';

const apiClient = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  timeout: 10000,
});

export default {
  async getUser(id: number): Promise<User> {
    const response = await apiClient.get<User>(`/users/${id}`);
    return response.data;
  },
};

6. 使用 Mock 数据

在开发阶段，可以使用 Mock 数据模拟接口返回，避免依赖后端服务。

示例（使用 Mock.js）：

// src/mock/index.js
import Mock from 'mockjs';

Mock.mock('/api/users', 'get', {
  'users|10': [{ id: 1, name: '@name', email: '@email' }],
});

// src/api/index.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: '/api',
  timeout: 10000,
});

export default {
  getUsers() {
    return apiClient.get('/users');
  },
};