在前端项目中使用 Mock 服务

在前后端分离开发中，Mock服务是一种常用的技术手段，用于模拟后端接口，以便前端开发人员可以独立进行开发和测试。

什么是 Mock 服务#

Mock 服务是一种技术手段，用于模拟后端接口，以便前端开发人员可以独立进行开发和测试。

为什么需要 Mock 服务#

提高开发效率，通常前端开发人员需要等待后端接口开发完毕才能进行开发，而使用 Mock 服务可以让我们在开发过程中使用模拟数据进行开发和测试。

如何在项目中使用 Mock 服务#

通常情况下，我们使用框架进行开发，比如 ice.js、umijs、next.js 等，这些框架都提供了 Mock 服务的支持。

但是也有一些项目没有使用框架，比如纯前端项目，这个时候我们就需要自己搭建 Mock 服务。这时我们可以使用 Apifox 工具来作为 Mock 服务。

使用 Apifox 作为 Mock 服务#

安装 Apifox 工具
通常由后端提供接口文档，并启用本地 Mock 服务，拿到 Mock 服务地址（例如：http://127.0.0.1:4523/m1/4945763-4603443-default/**/*）
修改前端项目中接口请求地址为 Mock 服务地址

3.1 通常我们会在项目中配置一个环境变量，用于区分开发环境和生产环境，env.development 添加以下配置

# apifox mock base url
REACT_APP_APIFOX_BASE_API=http://127.0.0.1:4523/m1/4945763-4603443-default

3.2 在开发环境中，我们将接口请求地址配置为 Mock 服务地址, 请求拦截器中添加如下代码

service.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    const { isApifoxMock = false } = config.customConfig || {};
    if (isApifoxMock) {
      config.baseURL = process.env.REACT_APP_APIFOX_BASE_API;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  },
);

3.3 配置接口自定义参数(isApifxiMock === true) 如果你是用的是 typescript，需要在 src 目录下的 types.d.ts 文件中添加如下代码

declare module 'axios' {
  export interface AxiosRequestConfig {
    customConfig?: {
      isApifoxMock?: boolean; // 是否是 apifox mock
    }
  }
}

启动项目，访问接口，查看 Mock 数据
后端提供接口后，更改接口自定义参数 isApifxiMock === false，即可访问真实接口数据

总结#

Mock 服务在前端开发中扮演着非常重要的角色，它可以帮助我们快速实现前后端分离开发，提升开发效率和测试效果。