Whislte 如何实现接口 Mock 返回值？

在 Whistle 中，实现接口 Mock 返回值可以通过以下几个步骤进行：

1. 安装和启动 Whistle

首先，确保已经安装了 Whistle。可以通过 npm 安装：

bash
npm install -g whistle

安装完成后，启动 Whistle：

bash
w2 start

2. 配置代理

确保系统或浏览器代理设置已经指向 Whistle 的代理地址（默认是 127.0.0.1:8899）。

3. 编写 Mock 规则

在 Whistle 的操作界面中（通常是通过访问 http://local.whistlejs.com/ 来访问），你可以添加新的规则来实现 Mock。

假设我们要 Mock 的接口是 http://example.com/api/data，我们希望返回自定义的 JSON 数据。可以按以下步骤操作：

1. 打开 Whistle 管理界面。

2. 在 Rules 栏目中输入你的 Mock 规则：

   shell
   http://example.com/api/data resBody://{ "id": 1, "name": "Alice", "status": "success" }

   这条规则指定当访问 http://example.com/api/data 时，返回的响应体是后面的 JSON 数据。

4. 测试 Mock

使用任何可以发送 HTTP 请求的工具（如 Postman 或者浏览器）向 http://example.com/api/data 发送请求，你应该会得到刚才配置的 Mock 数据：

json
{
  "id": 1,
  "name": "Alice",
  "status": "success"
}

5. 调整和优化

如果需要修改 Mock 数据或者添加更多的接口 Mock，只需在 Whistle 管理界面中修改或添加规则即可。

实例

例如，我们要模拟一个商品列表接口，该接口返回商品的数组。如果原接口的 URL 是 http://example.com/api/products，我们可以这样写 Mock 规则：

shell
http://example.com/api/products resBody//[{"id": 101, "name": "Product A"}, {"id": 102, "name": "Product B"}]

通过以上步骤，我们可以很灵活地在本地开发和测试阶段模拟后端接口的返回，极大地提高前端开发的效率和质量。