在前端开发中，经常需要与后端接口交互，测试时候需要一个 mock 接口来进行业务功能测试和接口联调测试，此时我们就需要使用一个 mock 工具，本文将介绍 npm 包 fetch-mocker，它是一个使用 fetch API 的前端 Mock 工具。
安装
运行下面的命令来安装 fetch-mocker:
npm install fetch-mocker --save-dev
fetch-mocker 是一个开发环境下的依赖库，所以使用了 --save-dev。
使用
我们主要使用 fetch-mocker 的 register 和 unregister 函数来进行接口 Mock 。我们可以在入口文件（例如index.js）中集中编写 mock规则：
-- -------------------- ---- -------
------ - --------- ---------- - ---- ---------------
----------------------- ----- ----- ---- ---- -- -
-- ---- ---------
------ ------------
------ -------------
------- ------
----
---
---------------------- ----- ----- ---- ---- -- -
-- ---- -------------
----- - ----- ---- - - ----------
-- ------ -- ------ -
------ ----
----------------
---------- -------- ------ --
--
-
----- ------ - -- -- ---- - ---- ------
------ --------------------
---
-- --------- ----
--------------------------在上面的代码中，我们使用 register 函数来注册了两条 mock 规则。第一条规则用于模拟登录接口返回数据，第二条规则用于模拟订单列表接口返回数据。我们可以通过 req.query 来获取接口请求的 URL 上携带的参数信息，然后按照实际情况返回对应的 mock 数据。
可以看到，使用 fetch-mocker 完全不需要创建一个服务器去服务接口请求，而是直接匹配注册的接口规则返回相应的数据，非常方便。
常用 API
register(url: string, resolver: RequestResolver<Request>, options: Partial<MockOptions> = {}): 注册一个 Mock 规则unregister(url: string): 取消注册一个 Mock 规则resetHandlers(): 重置所有 Mock 规则getMockHandlers(): 获取所有 Mock 规则的处理函数
总结
fetch-mocker 是一个很方便的前端 Mock 工具，使用起来非常简单。我们可以根据项目实际接口情况，自定义 Mock 规则进行测试，并通过取消 mock 规则达到在生产环境下不 Mock 接口的目的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554dc81e8991b448d20f8