Web 开发中，前后端交互的情境不能缺少了接口调用。然而，若是前后端开发未完成，我们该如何模拟这些接口数据呢？这个时候，wiremock 就能充当救世主的角色。wiremock 是一个免费的 RESTful API 测试工具，可以通过这个工具创建一个模拟的 HTTP 服务器来模拟 API 请求以及其它 HTTP 协议的交互行为。本文将介绍如何使用 npm 包 wiremock-mapper 来实现 wiremock 的 mock 数据映射。
引入包
确保您的项目已经安装 npm，然后用以下命令来安装 wiremock-mapper 包。
npm install wiremock-mapper
创建映射文件
我们需要在本地创建一个映射文件，它将实现本地 mock 服务。默认的 wiremock-mapper 映射文件是 wiremock-mapper.json，您可以根据需求命名新的映射文件，如 mock-mapper.json。
在此简单介绍一下映射文件的语法。映射文件由一个 JSON 对象组成。该对象包含了很多键值对，每个键值对都对应了一个模拟接口的 API 请求。以下是一个基本示例的简介：
{
"mappings": [
{
"request": {},
"response": {}
}
]
}其中，request 对象是一个匹配模块请求的模型，包含了模拟请求的参数；response对象则是一个模拟接口请求后的响应结果。您可以通过在 JSON 配置文件中指定 request 对象和 response 对象的值来定制自己所需的 API 请求。
映射文件示例
下面是 wiremock-mapper.json 的示例内容：
-- -------------------- ---- -------
-
----------- -
-
----- ------
---------- -
--------- ------
------------- -------
------------------ -
------ -
---------- -----
-
-
--
----------- -
--------- ----
---------- -
--------------- ------------------
--
------- -------------------
-
-
-
-该示例将匹配 GET 请求 http://localhost:8080/foo?foo=foo，并在请求成功时返回 JSON 数据项 { "foo": "bar" }。
启动 wiremock-mapper
最后，您可以按照以下步骤启动 wiremock-mapper：
- 在终端窗口进入映射文件所在目录
- 启动 wiremock-mapper，输入命令
npx wiremock-mapper start --mapper-file=<映射文件名>.json - 此时您的服务已经启动成功，您可以输入接口的 URL 来检查场景模拟结果。
总结
wiremock-mapper 为模拟接口请求提供了一条捷径，无需等待后台接口维护完成，就可以开始开发前端页面，并迭代开发。本文简单介绍了使用 wiremock-mapper 进行 mock 数据的基础知识，为您未来的前端开发路程带来了无尽的可能性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005666c81e8991b448e287f