Levi Blog

前言：前端开发的痛点#

在项目开发过程中，前后端通常是并行开发的。但我们经常遭遇以下尴尬：

1. 后端接口未就绪：后端还在写 CRUD，前端页面已经切好了，却只能填假数据。
2. 异常场景难复现：想自测“服务器返回空列表”或“超长文本截断”，需要后端配合改库，非常麻烦。
3. 数据覆盖不全：测试环境造数据成本高，甚至还需要删库重跑。

这时，本地 Mock 技术就派上用场了。通过在网络层拦截请求，我们可以运行一段简单的代码来实时修改 Response（响应体），让客户端以为服务器返回了我们要的数据。

核心原理：中间人 (MITM) 脚本#

大多数专业的网络调试工具（如 Charles, Fiddler, Proxyman）都支持 Scripting (脚本) 功能。

流程如下：

1. 拦截 (Intercept)：工具捕获特定的 URL 请求（例如 api.myapp.com/user）。
2. 执行 (Execute)：工具运行你编写的 .js 脚本。
3. 篡改 (Modify)：脚本读取原始 Response JSON，修改特定字段。
4. 返回 (Return)：客户端接收到修改后的数据。

JavaScript 脚本编写实战#

脚本的核心逻辑通常分为三步：Parse (解析) -> Modify (修改) -> Stringify (重组)。

1
{
2
  "id": 101,
3
  "nickname": "Levi",
4
  "bio": "Frontend Developer"
5
}

1
// 1. 获取原始响应体
2
// 大多数工具会将响应体暴露为 response.body 或类似变量
3
let obj = JSON.parse($response.body);
4

5
// 2. 修改数据：注入超长文本，测试边界情况
6
obj.nickname = "这是一段非常非常长的测试文本，用于验证 UI 组件在极端情况下的布局表现是否正常";
7

8
// 3. 重组并返回
9
// 将修改后的对象转回字符串
10
$done({ body: JSON.stringify(obj) });

1
// 注意：这次我们不解析原数据，直接构造错误响应
2

3
let errorResponse = {
4
    "code": 500,
5
    "status": "error",
6
    "message": "Internal Server Error: 模拟服务器内部错误"
7
};
8

9
$done({
10
    status: 500, // 修改 HTTP 状态码
11
    body: JSON.stringify(errorResponse)
12
});

进阶技巧：条件断点与随机化#

为了测试更真实的场景，我们可以引入随机逻辑，模拟不稳定的数据返回。

1
let obj = JSON.parse($response.body);
2

3
// 随机生成 50% 的概率让列表为空，测试“空状态”页面 (Empty State)
4
if (Math.random() > 0.5) {
5
    obj.data_list = [];
6
}
7

8
console.log("当前 Mock 状态: " + (obj.data_list.length === 0 ? "空列表" : "有数据"));
9

10
$done({ body: JSON.stringify(obj) });

最佳实践与注意事项#

1. 异常捕获：在解析 JSON 时最好包裹在 try-catch 块中，防止原始数据解析失败导致脚本报错。

   1
   try {
   2
       let obj = JSON.parse($response.body);
   3
       // ... modifications
   4
       $done({ body: JSON.stringify(obj) });
   5
   } catch (e) {
   6
       console.log("JSON Parse Error: " + e);
   7
       $done({}); // 保持原状
   8
   }

2. 仅用于开发自测：此类脚本仅应在本地开发环境或测试环境使用，严禁用于生产环境或恶意攻击。
3. 仅处理已授权流量：请确保你拦截和调试的是自己负责的应用、测试域名或已获得授权的接口，不要触碰第三方未授权系统。
4. 避免真实用户数据：调试环境应尽量使用脱敏数据，避免在脚本、日志或截图中暴露手机号、邮箱、Token 等敏感信息。

总结#

掌握基于脚本的网络层 Mock 技术，能极大减少前端开发对后端的依赖。你不需要等待后端部署，也不需要求人改数据，几行代码就能构建出你想要的任何测试场景，大幅提升开发效率。

Happy Coding!