面试题：Vue网络请求中Mock数据与真实接口切换的策略及实现

实现切换的策略
- 接口抽象：在项目中对接口请求进行抽象封装，例如使用一个单独的api文件夹，每个接口都有对应的函数。这样无论是Mock数据还是真实接口，调用方的使用方式保持一致。
- 环境变量区分：通过环境变量来决定当前使用Mock数据还是真实接口。在开发环境下，使用Mock数据方便前端独立开发；在测试和生产环境下，切换到真实接口。
优雅实现切换的配置方式
- 使用.env文件：
  - 在项目根目录下创建.env.development、.env.test和.env.production文件，分别对应开发、测试和生产环境。
  - 在.env.development中可以设置VUE_APP_USE_MOCK=true，在.env.test和.env.production中设置VUE_APP_USE_MOCK=false。
- 配置接口请求逻辑：
  - 在api文件夹下，例如有一个user.js文件用于用户相关接口。可以编写如下代码：

import axios from 'axios';
const isMock = process.env.VUE_APP_USE_MOCK === 'true';
const baseUrl = isMock? '/mock-api' : '/real - api';

export const getUserInfo = () => {
  return isMock? {name: 'Mock User', age: 18} : axios.get(`${baseUrl}/user/info`);
};

Mock数据配置：
- 使用vue - mock - js等库来设置Mock数据。例如在src/mock文件夹下创建user.js文件：

import Mock from 'vue - mock - js';
Mock.mock('/mock - api/user/info', {
  name: 'Mock User',
  age: 18
});

不同环境的适应性
- 开发环境：开发人员在.env.development中配置使用Mock数据，这样可以在没有后端接口的情况下独立完成前端功能开发，提高开发效率。同时方便对前端页面进行样式调整和交互测试。
- 测试环境：在.env.test中设置使用真实接口，测试人员可以对前后端联调进行测试，验证接口功能的正确性，包括数据的传输、验证等。
- 生产环境：在.env.production中同样设置使用真实接口，确保线上用户能够正常使用应用，获取到真实的数据。

面试题：Vue网络请求中Mock数据与真实接口切换的策略及实现

知识考点

面试题答案