使用 Whistle mock 数据

柠檬百香果
4,595 阅读5分钟

前端 mock 数据

Mock 数据对于前端来说非常重要，有以下几个原因：

  1. 独立开发：前端和后端往往是并行进行的，当后端的接口尚未完成或不可用时，前端可以根据接口协议，通过 mock 数据来模拟后端接口的返回结果。使得前端工作可以独立进行，而不受后端的影响
  2. 测试驱动开发：Mock数据对于测试驱动开发（TDD）非常有用，可以使用Mock数据来模拟各种场景和数据情况，验证前端代码的正确性和稳定性。

Mock 的几种方式

主要有这三种方式：

  1. 使用 Mock.js：Mock.js 是一个强大的数据模拟生成器，可以快速生成各种类型的数据：比文本、邮箱、电话、日期等。
  2. 使用工具库：有许多工具库可以帮助您进行Mock数据的创建和管理。例如，json-server 可以在本地启动一个RESTful API服务器，基于JSON文件提供模拟数据。axios-mock-adapter 可以拦截axios请求，并返回预定义的Mock数据。这些工具库提供了便捷的方法来模拟后端接口并提供Mock数据。
  3. 借助开发者工具：现代浏览器的开发者工具通常提供了网络的请求拦截和修改功能，你可以借助这些工具来拦截请求，并手动修改响应数据为mock数据返回给前端。

前端 Mock 选型对比：

mock 方式是否不侵入代码拦截请求mock环境是否不需要网络代理配置
Mock.js❌❌本地✅
json-server❌可以拦截和处理来自客户端的请求，但其实现的方式是基于内存中的数据，而非实际的网络请求本地✅
axios-mock-adapter❌axios-mock-adapter 实际上是用于拦截 Axios 库发送的请求，并模拟返回的响应数据，而不是拦截实际的网络请求本地✅
msw（Mock Service Worker❌使用 Service Worker 技术来拦截网络请求浏览器👍✅
借助开发者工具✅浏览器拦截浏览器👍❌，使用 wistle 代理， 需要在电脑网络配置代理

综上，这几种 mock 方式都有各自的好处，但是如果不想侵入代码、且能够在浏览器中拦截请求，推荐使用借助开发者工具的方式 Mock，通常我们使用 Whistle 作为代理服务器来 Mock 数据。

使用 Whistle mock 数据

首先安装 Whistle

# 安装
npm install -g whistle
# 启动
w2 start
# 启动后可以访问 http://127.0.0.1:8899/
# 重启
w2 restart
# 停止
w2 stop

启动后，访问 http://127.0.0.1:8899/，就可以看到下图：

whistle_config_6.png

图中，创建了 Test-User 的规则（rules），这条规则如下：

/\/api/users/get_user/ delay file://{get_user.json}

表示遇到 /api/users/get_user/ 的请求，就会拦截，并且用 get_user.json 这个 Mock 文件的内容，修改响应数据返回给客户端。

whistle_config_7.png

这样就成功拦截请求，使用 mock 数据了吗？当然还没，还需要两步：

  1. 设置系统网络代理：将 whistle 服务器地址填入网络代理
  2. 浏览器代理：使用 SwitchOmega 浏览器扩展程序，从系统网络中获取代理地址，连接到代理服务器（Whistle 服务器）

1.设置系统网络代理

我这里使用的系统是 macOS Ventura

选择电脑连接的网络，点击详细信息

whistle_config_1.png 接着选择代理，将 whistle 的地址填入：

whistle_config_2.png

这样就设置完成了，还有一个很重要的步骤:安装根证书，假如不安装根证书的话，就不能抓 HTTPS 的包，详情请看 安装步骤

2. 设置浏览器代理

安装 SwitchOmega 浏览器扩展程序，并将 whistle 服务器地址填入代理服务器

whistle_config_5.png

为什么需要在 系统设置 whistle 网络代理后，还要在SwitchyOmega设置一遍 whistle代理服务器地址？

在使用 Whistle 进行网络调试时，需要在系统设置和 SwitchyOmega 中进行代理配置的原因是两者分别控制不同的网络流量。

  1. 系统设置中的代理配置：

    • 在系统设置中配置代理，会将整个操作系统的网络流量都经过代理服务器。
    • 这样，所有应用程序（包括浏览器以及其他网络应用）发送的请求都会通过代理服务器，并可以被 Whistle 捕获和分析。

  2. SwitchyOmega 中的代理配置：

    • SwitchyOmega 是一个浏览器扩展程序，用于管理浏览器的代理设置。
    • 即使在系统设置中配置了代理，浏览器默认情况下可能仍然使用直接连接（不经过代理）的方式发送请求。
    • 为了让浏览器的请求也经过代理服务器并被 Whistle 捕获，需要在 SwitchyOmega 中配置与 Whistle 相同的代理服务器地址。

综上所述，通过在系统设置中配置代理，可以使整个操作系统的网络流量经过代理服务器。但是，浏览器默认情况下可能仍然直接连接，因此需要在 SwitchyOmega 中进行额外的代理配置，将浏览器的请求也经过代理。这样，Whistle 才能完全捕获和分析浏览器发出的网络请求。

需要确保系统设置和 SwitchyOmega 中的代理配置一致，以确保所有网络流量都通过相同的代理服务器。这样，您就可以同时使用 Whistle 分析系统级别的网络请求和浏览器级别的网络请求。

万事俱备，测试一下

whistle_config_8.png ✅ 成功将 mock 的数据作为响应数据返回给了客户端了 。

总结

前端 mock 数据非常重要，mock 数据使得前端工作可以独立进行，而不受后端的影响。那么可以通过 Whistle 代理服务器的方式，将请求拦截，把响应数据修改为 mock 数据，访问给前端。

avatar
文章
阅读
粉丝