前言
在前端开发中，我们经常需要模拟接口数据以便开发调试。而 whistle.mock 正好可以满足这个需求，是一个功能强大的接口模拟工具。它可以让你快速创建虚拟接口，并管理它们的入参、出参和响应。本文将详细介绍 whistle.mock 的使用方法。
安装及启动
Whistle 是一款非常优秀的抓包调试工具，能够帮助我们快速抓取请求和响应，并对其进行分析。而 whistle.mock 就是 Whistle 的一个插件，所以我们必须先安装好 Whistle，然后在 Whistle 中启动 whistle.mock。
安装 Whistle
Whistle 的安装可以参考官方文档：https://wproxy.org/whistle/install.html。
启动 whistle.mock
Whistle 中的插件需要单独安装，可以在 Whistle 中打开插件管理页面，搜索 whistle.mock 并安装。
安装完成后，在命令行中输入以下命令即可启动 whistle.mock：
w2 start
启动后的 whistle.mock 的默认地址为 http://127.0.0.1:8899/mock，打开该地址即可进入界面。
创建接口
进入 whistle.mock 的界面后，我们可以看到左侧菜单栏有一个 新增接口 按钮，点击后可以填写接口名称、路径、方法、入参和出参等信息。
返回固定数据
在 出参 中我们可以设置接口返回的数据。例如我们设置一个固定的返回数据：
{
"code": 0,
"message": "success",
"data": {
"name": "Tom",
"age": 18
}
}这样当我们请求该接口时，就会得到这个固定的返回数据。我们可以再次点击 新增接口，模拟一个 post 请求：
动态生成数据
使用封装好的 mockjs，我们可以很方便地生成各种随机数据。
-- -------------------- ---- -------
-
------- --
---------- ----------
------- -
------- ---------
------------ --
----------- ----- ----
-
-这样每次请求该接口时，都会生成一个不同的随机数据。其中 @cname 表示生成中文姓名，age|18-30 表示生成一个 18 到 30 岁之间的整数，gender|1 表示从数组中随机取一个元素作为返回值。
返回拦截器
有时候我们在调试接口时，需要对接口返回的数据进行一些特殊处理，需要使用返回拦截器。
-- -------------------- ---- -------
----- ---- -- -
-- ------------------------ --- ---- -
--- ---- - -----------------
-- ---------- --- -- -
--------- - ---
------------ - ------
-
-
-这段代码会被放在 出参 的输入框中。它的作用是，当接口返回数据时，如果返回的 code 状态码为 0，那么将其改为 200；将返回的 message 改为 请求成功。
接口管理
在 whistle.mock 的菜单栏中，我们可以看到 接口管理 选项，点击后可以查看已创建的所有接口信息，包括接口名称、路径、方法、入参、出参等。
在这里我们还可以对接口进行编辑、删除、复制等操作。
实战
以上是 whistle.mock 的基本使用，下面我们来实战一下。
模拟数据接口
在实际开发中，我们经常需要使用接口来获取数据。假设我们正在开发一个电商网站，我们需要模拟一个获取商品列表的接口。在 whistle.mock 中，我们可以这样设置接口：
-- -------------------- ---- -------
-
------- --
---------- ----------
---------- --
-------- --
------- ----------
------------------ --
--------------- -
--
-每次请求该接口时，都会返回 20 条随机商品数据。其中 id|+1 表示每次递增 1，name 字段是随机生成的中文标题，price|99-1999.2 表示生成一个 99 到 1999.2 的浮点数，stock|1-1000 表示生成一个 1 到 1000 的整数。
模拟登录接口
我们知道，在电商网站中，用户需要登录后才能进行购物。为了模拟登录接口，我们需要使用到 whistle.mock 中的流程控制。假设我们的登录接口地址为 /api/login。
首先，我们需要设置一个普通的 GET 接口，返回用户信息和登录状态：
-- -------------------- ---- -------
-
------- --
---------- ----------
------- -
------------ ------ -------
----------- -
------- ---------
------------ --
----------- ----- ----
-
-
-接下来，我们需要设置 POST 接口来模拟登录流程。这个接口我们需要设置请求头，增加一个 Content-Type: application/x-www-form-urlencoded。然后再在 出参 中设置一个返回拦截器，代码如下：
-- -------------------- ---- -------
----- ---- -- -
-- ------------------------------------ --- ------------------------------------ -
--- ---- - --------------------------
-- -------------- --- ------- -- ------------- --- ----------- -
----------------- - ----------------
----- --
-------- ----------
----- -
------ --------------------------------------
-
--
- ---- -
----------------- - ----------------
----- --
-------- ---------
--
-
-
-这段代码的作用是，当用户使用正确的账号密码登录时，返回一个固定的 token，表示登录成功。当用户使用错误的账号密码登录时，返回一个固定的错误信息。
至此，我们已经成功模拟了一个登录接口，并使用了流程控制功能。
结语
Whistle.mock 是一款非常实用的接口模拟工具，它可以帮助我们快速创建虚拟接口，并管理它们的入参、出参和响应。在实际开发中，尤其是在前端开发中，Whistle.mock 的作用不可忽视。
本文介绍了 whistle.mock 的安装、启动、创建接口、接口管理以及实战操作。希望本文对初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671088dd3466f61ffdeb9