在前端开发中，为了模拟服务端接口的返回数据，我们经常需要使用 mock 数据。而 zen-mockserver 则是一个可以在本地搭建 mock 服务器的 npm 包，可以方便地自定义返回数据、请求头等各种信息。
安装
使用 npm 进行安装：
--- ------- --------------
快速上手
我们先新建一个 mock.js 文件，假设它所在的目录为 /mocks/，然后写入以下代码：
----- ---------- - -------------------------
----- ---- - -
------ -
- --- -- ----- ------- --
- --- -- ----- ----- --
- --- -- ----- --------- --
--
-
------------
----- -------------
------- ------
--------- -- -- --
----------- ----
-------- - -------------- ----- --
----- -----------
---
--上面的代码定义了一个处理 "/api/users" 路径的 GET 请求的响应，它会返回一个包含三个用户信息的数组，每个用户包含 id 和 name 两个属性。
接下来，我们在终端执行以下命令：
---------- -- ---- -- -------
这会启动一个监听 3000 端口的 mock 服务器，并将 /mocks/ 目录下所有的文件作为 mock 文件加载。
于是我们就可以通过访问 "http://localhost:3000/api/users" 得到一个 JSON 数组返回，其中包含我们定义的三个用户信息。
指定请求方法和参数
如果我们需要指定请求参数或者响应的 HTTP 方法等，我们只需要在定义的函数体里面解析请求参数，并将需要的属性插入返回值中即可。
----- ---------- - -------------------------
----- ---- - -
------ -
- --- -- ----- ------- --
- --- -- ----- ----- --
- --- -- ----- --------- --
--
-
------------
----- ------------------------
------- ------
--------- ----- -- -
----- -- - -----------------------
----- ---- - ------------------- -- ---- --- ---
-- ------ -
------ -
----------- ----
-------- - -------------- ----- --
----- -----
-
- ---- -
------ -
----------- ----
----- - -------- ----- --- ------ --
-
-
--
--上面的代码定义了一个正则表达式模式的 path，它匹配以 "/api/users/" 开头，后面跟一个数字的路径。当具体的请求匹配到这个模式时，将会执行我们的回调函数，它会解析出请求中的数字 id，并在 data.users 数组中查找 id 匹配的用户信息。如果找到，它将返回该用户的 JSON 对象，还包含了自定义的 X-My-Header 响应头；否则返回一个错误信息。
使用配置文件
在上面的例子中，我们是通过命令行参数指定了 mock 文件所在目录，而实际使用中，我们可能需要一些更为灵活的配置。这时我们可以使用一个配置文件来指定监听端口以及 mock 文件所在目录等。
我们只需要在项目根目录下创建一个 zenmock.config.js 文件：
-------------- - - ----- ----- -------- ---------- -
然后在终端执行以下命令：
----------
这会自动加载配置文件，并启动服务器。
结语
zen-mockserver 是一个非常方便的本地 mock 服务器，它可以让我们方便地定制返回数据，并支持正则表达式路径匹配等高级配置。当然，在实际项目中，我们可能也需要一些更为复杂的 mock 需求，例如对于反复请求的接口，我们希望只发送一次请求并返回统一的结果。对于这种需求，我们可以通过自定义中间件实现。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f86238a385564ab6cbc