简介
近年来，前端开发中使用 Mock 数据的需求越来越高，特别是在开发阶段。目前市面上有不少 Mock 工具，比如 JSON Server、Mock.js 等。本文主要介绍一款 npm 包 wiremock-js，它是一款轻量级的基于 Server 的 Mock 工具。
wiremock-js 最初是由 Java 版本的操作方式引起了许多开发人员的关注，现在已经有了针对 JavaScript/Node.js 的版本。它可以很好的模拟后端接口，实现前后端开发的分离，加速开发效率。
安装
首先，在项目文件夹中使用 npm 包管理工具安装 wiremock-js 模块。
--- ------- ----------- ----------
安装完成后，在项目中创建一个 __mock__ 文件夹，用来存放 Mock 数据。
使用
wiremock-js 提供了一些消息模拟功能：
- Http requests – 模拟 Http 请求
- Http responses – 模拟 Http 响应
- Static resources – 提供静态资产服务
接下来，让我们来简单学习一下如何使用它的消息模拟功能。
HTTP 请求
wiremock-js 可以监听本地端口以响应 HTTP 请求，并使用请求主题匹配响应。
假设您想要模拟一个数据列表接口 /api/list，它期望得到一个 GET 请求，返回一个 JSON 格式的数组。您可以在 __mock__ 文件夹下创建一个 list.json 用来存储 Mock 数据，并在代码中使用以下语句来启动 Mock 服务器。
----- -------- - -----------------------
----- ---- - ----------------
----- -------------- - --- ----------
----- -----
------------------ -------------------- ------------
-------- ----
---
------------------------------ -- -
--------------------- ------ ------- ---------------
---------------- -- -
------------------- -- ----- -------- ------- -------- -------
---以上代码的作用是启动 wiremock-js 服务，使用 verbose（开启详细模式） 输出日志，同时监听 8080 端口，将 __mock__ 目录下的配置文件作为 mock 数据库。这些配置文件包含了所有服务接口的请求/响应模式的定义。
HTTP 响应
wiremock-js 支持响应各种 HTTP 请求，同时支持 GET、PUT、POST、DELETE 等一系列操作。您可以通过以下语句定义 Mock 数据并保存至 __mock__ 文件夹内。
-
---------- -
--------- ------
------ ------------
------------------ -
----- -
---------- ---
-
-
--
----------- -
--------- ----
------- -
------------- -
-
----- ----
------- -----
------ -----
------------ -------------
-
-
-
-
-这段代码将 response 响应字段定义好，然后保存至创建的 __mock__ 目录下。这样，当请求路径为 /api/list?id=1 时，返回值就是上述定义数据。
Static resources
除了 HTTP 请求和 HTTP 响应这两种方式以外，wiremock-js 还支持直接返回静态资源。
假如您需要使用一张背景图片，可以在 __mock__ 文件夹下创建 bg.jpg 文件，并在代码中定义一下语句：
-
---------- -
------ -----------------
--------- -----
--
----------- -
--------- ----
---------- -
--------------- -----------
--
--------------- --------
-
-这段代码就是将在 __mock__ 文件夹下的 bg.jpg 图片作为响应返回给请求。
总结
wiremock-js 是一个非常方便的基于服务器的 Mock 工具，它提供了多种模拟 HTTP 请求/响应和静态资源服务的方式，也允许使用者通过本地配置文件对 Mock 数据进行定义和管理。使用它可以有效地协助前后端分离，提升项目开发效率，减少联调用时出现的问题。希望通过本文，大家可以对 wiremock-js 工具的使用有所了解，可以更加方便地进行实际开发工作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671108dd3466f61ffe342