开始之前

前端不必等后端完成才开始渲染列表。先确定最小响应契约，再用临时 Mock 地址替换 API 基础地址。本例只返回演示订单，不保存提交的数据。

边看边操作在 临时 Mock API 中打开实际工作区
01

先定义可展示的响应

在 Mock API 工具中粘贴下方配置，点击“创建临时接口”。items 中的字段应与前端实际读取字段一致；body 直接写 JSON 对象，不要再套一层字符串。

示例
{
  "replies": [
    {
      "status": 200,
      "delay_ms": 0,
      "body": {
        "items": [
          {
            "id": "order_demo_1",
            "status": "ready"
          }
        ],
        "total": 1
      }
    }
  ]
}
02

复制地址并验证

点击“复制地址”，在自己的开发页面读取它。下方占位值必须换成刚生成的完整 HTTPS 地址。先检查状态码，再把 items 交给列表组件。

示例
const endpoint = '替换为刚生成的 HTTPS 地址';
const response = await fetch(endpoint, { credentials: 'omit' });
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();
console.log(data.items[0].id, data.total);
03

核对预期结果

预期 HTTP 200，首条 id 为 order_demo_1，total 为 1。再创建一份 items: []、total: 0 的配置验证空列表界面；新建接口会得到新的地址，应用也要同步切换。

04

完成后清理与联调

页面内的“发送一次 GET”可检查响应，“删除接口”可提前清理。切回真实后端后，重新验证鉴权、分页、错误格式和数据写入，不能用 Mock 成功替代后端验收。

为什么请求参数没有改变结果

这是固定响应或顺序响应接口，不按 query、路径或请求正文动态查找数据，也不提供数据库持久化。需要条件分支时，请在自有 Mock 服务中实现，而不是往这个临时地址追加任意路径。

跨域请求注意事项

公共 Mock 响应允许跨域读取，但不提供带 Cookie 的跨站凭据支持。示例使用 credentials: omit；如果浏览器报跨域错误，先确认使用的是生成的调用地址，而不是创建或管理接口。

临时接口的支持范围

最多 5 个响应，每个 body 为有效 JSON 且不超过 16 KiB，delay_ms 为 0–5000，status 为 200–599 且不含 304。配置上传到服务器内存，地址最长保留 30 分钟，重启会提前清除。持有地址的人可读取响应；只放测试数据。请求正文不保存，也不会改变你配置好的响应。

要点总结
  • 先约定响应结构，再接入组件。
  • 生成地址是短期测试资源。
  • Mock 无法证明真实后端的鉴权或持久化行为。