JSON Mock 工具：多接口联动（三）

kooboo china.

已于 2025-06-25 21:10:58 修改

阅读量661

点赞数 17

CC 4.0 BY-SA版权

分类专栏：效率工具文章标签：状态模式 json 编辑器前端 javascript

于 2025-06-25 18:13:05 首次发布

本文链接：https://blog.csdn.net/2501_91137919/article/details/148904396

效率工具专栏收录该内容

13 篇文章

订阅专栏

JSON Mock 工具：模拟JSON API 接口（一）-CSDN博客

JSON Mock 工具：从接口模拟到前端联调（二）-CSDN博客

在前端开发与接口联调的世界里，JSON Mock 工具为我们提供了模拟接口返回、脱离后端依赖进行开发的便利途径。本文将结合实际配置与响应数据，深入讲解 JSON Mock 多接口联动的实现过程，助力开发者高效完成前端开发与测试。示例效果如下：

一、多接口联动场景与需求

在复杂的前端应用中，常常存在多个接口相互依赖的情况。

例如，用户需先调用登录接口获取 token，再凭借 token 调用用户信息接口、订单列表接口，以获取完整的业务数据。
这种多接口联动的场景，要求 Mock 工具能精准模拟接口间的依赖关系与数据传递，为前端开发营造真实的测试环境。

二、明确目标：模拟 “登录→用户信息→订单” 流程

配置 3 个 Mock 接口，让它们 串联调用：

登录接口（POST / login）：验证用户身份，返回登录态标识 token。
用户信息接口（GET / userInfo）：依赖登录 token，获取用户头像、用户名等详细信息。
订单列表接口（GET / orderList）：同样依赖 token，返回用户的订单数据，包括订单 ID、商品名称、价格等。

三、JSON Mock 接口配置深度解析

（一）登录接口（POST / login）

1. 配置思路

登录接口作为流程起点，核心是返回唯一标识用户登录态的 token，同时可附带登录结果提示、状态码等信息

2. 操作流程：

点击 Root Node 旁的 + → 选 Add Field → 填 code，类型选 Number，值填 200；
同理，添加 data（类型 Object）→ 展开 data → 添加 token（String，值
mock_token_${@integer(1000, 9999)} ）、expire（Number，值
3600{{request.query.token}} ）；
最后添加 message（String，值 登录成功 ）。

3. 字段详解：

message 字段：用于向前端传递简洁的操作结果提示，帮助前端开发者快速识别接口调用状态，如 “登录成功” 明确告知用户认证通过。
data.token 字段：mock_token_${5687} 是自定义的模拟 token 格式，${5687} 可模拟后端生成的唯一标识部分。实际应用中，可结合 Mock 语法（如 @integer ）生成更随机、复杂的 token，如 mock_token_${@integer(10000, 99999)}，增强模拟数据的真实性。
code 字段：固定为 200，遵循 HTTP 状态码规范，代表接口调用成功，便于前端统一处理响应状态。

关键：data.token 的值填 {{request.query.token}} ，表示这个字段会 动态获取请求参数中的 token ，模拟真实接口的 “token 校验” 逻辑。

（二）用户信息接口（GET / userInfo）

1. 配置思路

该接口需校验登录 token 有效性，并返回与用户相关的个性化数据。通过 Mock 语法生成动态数据，模拟真实后端的返回逻辑。

2. 字段详解

data.userId 字段：值可模拟特定用户 ID，使用 @integer 语法生成随机 ID，如
@integer(1000, 9999)，覆盖更多测试用例。
data.username 字段：@cname 语法会生成中文用户名，如 “萧伟”“卢磊” 等，模拟真实用户的个性化名称，使测试数据更贴近实际。
data.avatar 字段：借助第三方图片服务（如 picsum.photos ），结合 random生成随机头像 URL，为前端提供真实可展示的图片资源，丰富测试场景。
data.token 字段：{{request.query.token}} 是关键配置，实现从请求参数中提取 token，模拟后端校验登录态的逻辑。

（三）订单列表接口（GET / orderList）

1. 配置思路

基于用户登录态，返回订单相关数据。需模拟订单列表的动态生成，同时校验 token，确保接口依赖关系完整。

2. 字段详解

data.orderList 字段：数组结构模拟订单列表，每个数组元素为订单对象。
- orderId 字段：@number 生成随机订单 ID，如 12345 67890 等，模拟真实订单的唯一标识。
- goodsName 字段：自定义商品名称（如 “专可日五”“什今部只” ），可结合 @cword 语法生成随机中文商品名，如 @cword(4, 6) 生成 4 - 6 字的随机名称，提升数据真实性。
- price 字段：@number 生成随机价格，如 99.9 199.5 等，模拟商品的实际售价，可通过 @float(10, 500, 2, 2) 语法生成指定范围（10 - 500）、保留两位小数的价格，更贴近业务场景。

四、前端代码实现与调用逻辑

（一）核心库引入与页面结构

前端通过 axios 库实现 HTTP 请求，页面包含三个按钮，分别对应三个接口的调用，同时设置结果展示区域：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>多接口联动演示</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
  <style>
    button { margin: 5px; padding: 8px 16px; }
    .result { margin-top: 20px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <h3>JSON Mock 多接口联动演示</h3>
  <button onclick="login()">1. 调用 POST /login</button>
  <button onclick="getUserInfo()">2. 调用 GET /userInfo（需登录后）</button>
  <button onclick="getOrderList()">3. 调用 GET /orderList（需登录后）</button>
  <div class="result" id="result"></div> 
</body>
</html>

axios 引入：通过 CDN 方式快速引入 axios 库，简化 HTTP 请求代码编写，支持 Promise 语法，便于异步操作处理。
按钮与结果区域：三个按钮对应三个接口调用，点击触发相应函数；result 区域用于展示接口响应数据，帮助开发者直观查看调用结果。

（二）接口调用函数实现

1. 登录接口调用（`login` 函数）

let token = ''; 
    // 为每个接口单独定义完整URL（替换为实际接口地址）
    const loginUrl = '';
    const userInfoUrl = ''; 
    const orderListUrl = ''; 

    // 1. 登录接口
    function login() {
      axios.post(loginUrl) // 直接使用完整URL
        .then(res => {
          token = res.data.data.token;
          showResult('登录响应：', res.data);
        })
        .catch(err => showError(err));
    }

token 变量：用于存储登录接口返回的 token，为后续接口调用提供凭证。
baseUrl 配置：指向 JSON Mock 工具的项目基础 URL，确保接口调用地址正确。
axios.post 请求：发送 POST 请求到登录接口，模拟用户提交登录信息
响应处理：
1. 成功响应时，提取 token 并存储；
2. 调用 showResult 函数展示响应数据；
3. 捕获错误时调用 showError 函数处理，如网络异常、接口 404 等。

2. 用户信息接口调用（`getUserInfo` 函数）

//  获取用户信息接口
    function getUserInfo() {
      if (!token) return alert('请先登录！');
      axios.get(`${userInfoUrl}?token=${token}`) // 拼接token参数
        .then(res => showResult('用户信息响应：', res.data))
        .catch(err => showError(err));
    }

登录校验：调用前检查 token 是否为空，若为空则提示用户先登录，模拟真实业务的流程依赖。
axios.get 请求：发送 GET 请求到用户信息接口，并在 URL 中拼接 token 参数，模拟前端传递登录态的逻辑，与 Mock 接口配置（{{request.query.token}} ）对应。
响应与错误处理：同登录接口，展示响应数据或处理错误。

3. 订单列表接口调用（`getOrderList` 函数）

// 获取订单列表接口
    function getOrderList() {
      if (!token) return alert('请先登录！');
      axios.get(`${orderListUrl}?token=${token}`) // 拼接token参数
        .then(res => showResult('订单列表响应：', res.data))
        .catch(err => showError(err));

逻辑与用户信息接口类似：依赖 token 校验，发送 GET 请求并传递 token 参数，处理响应与错误，完整模拟多接口联动的业务流程。

（三）辅助函数（`showResult` 与 `showError`）

// 辅助函数：显示响应结果
    function showResult(title, data) {
      document.getElementById('result').innerHTML += 
        `<div style="color: #4CAF50;">${title}</div>` + 
        JSON.stringify(data, null, 2) + '<hr>';
    }

    // 辅助函数：显示错误
    function showError(err) {
      document.getElementById('result').innerHTML += 
        `<div style="color: #F44336;">错误：${err.message}</div><hr>`;
    }

showResult 函数：接收标题和数据参数，动态向页面 result 区域添加响应信息，通过 JSON.stringify 格式化数据，便于查看接口；绿色文字标识成功响应，提升可读性。
showError 函数：捕获接口调用错误，以红色文字展示错误信息（如错误消息、状态码等），帮助开发者快速定位问题。