How to implement mock api return values in whislte？

In Whistle, implementing mock return values for API interfaces can be done through the following steps:

1. Install and Start Whistle

First, ensure that Whistle is installed. It can be installed via npm:

bash
npm install -g whistle

After installation, start Whistle:

bash
w2 start

2. Configure Proxy

Ensure that the system or browser proxy settings point to Whistle's proxy address (default is 127.0.0.1:8899).

3. Write Mock Rules

In Whistle's management interface (typically accessed via http://local.whistlejs.com/), you can add new rules to implement mock functionality.

Suppose we want to mock the interface http://example.com/api/data and return custom JSON data. Follow these steps:

1. Open Whistle's management interface.

2. In the Rules section, input your mock rule:

   shell
   

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

shell

This rule specifies that when accessing `http://example.com/api/data`, the response body is the JSON data following it.

### 4. Test the Mock

Use any tool that can send HTTP requests (such as Postman or a browser) to send a request to `http://example.com/api/data`; you should receive the mock data configured earlier:

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

5. Adjust and Optimize

If you need to modify the mock data or add more interface mocks, simply modify or add rules in Whistle's management interface.

Example

For example, to simulate a product list interface that returns an array of products, if the original interface URL is http://example.com/api/products, we can write the mock rule as:

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

By following these steps, we can flexibly simulate backend interface responses during local development and testing, significantly improving the efficiency and quality of frontend development.