在进行前端开发过程中，经常会遇到需要模拟后端 API 接口返回数据的情况。这时使用 npm 包 api-mocks 可以有效地解决这个问题。本文将教你如何安装和使用 api-mocks，来快速构建出一个后端接口的模拟数据。
安装
api-mocks 是一个命令行工具，可通过 npm 安装。在终端中运行以下命令即可安装最新版 api-mocks 包：
npm install api-mocks --save-dev
使用
在前端项目根目录下新建一个 mocks 文件夹，在该文件夹中新建一个 mock.js 文件，用于编写模拟数据的代码。
mock.js 中应当导出一个对象，该对象的键为后端 API 接口的路径，值为返回接口数据的函数。
例如，以下代码中的 mock 对象中，有两个键 /api/user 和 /api/article，分别对应两个后端 API 接口。
-- -------------------- ---- -------
----- ---- - -
------------ -------- ----- ---- -
----- ---- - - ----- ------ ---- -- --
---------------
--
--------------- -------- ----- ---- -
----- ------- - - ------ ------ -------- -------- ----- -- -- --------- --
------------------
-
--
-------------- - -----在终端中，执行以下命令即可启动 api-mocks：
api-mocks -p 3000 -m ./mocks/
以上命令中，-p 参数指定了启动端口号，-m 参数指定了模拟数据文件夹的路径。
这时，就可以在浏览器中访问 http://localhost:3000/api/user 和 http://localhost:3000/api/user，就能看到对应的模拟数据返回了。
示例代码
以下是一个完整的 mock.js 文件的例子，扩展了 api-mocks 的路由匹配功能：
-- -------------------- ---- -------
----- ---- - -
------------ -------- ----- ---- -
----- ---- - - ----- ------ ---- -- --
---------------
--
---------------- -------- ----- ---- -
----- -- - --------------
----- ---- - - --- --- ----- ----- --
---------------
-
--
----- --------- - ----------------------
------ -----
--------- ------
---
-------------- - ----------上面的代码通过添加路径参数和冒号来扩展了 api-mocks 的路由匹配功能，可以通过 http://localhost:3000/api/user/1 访问到对应的模拟数据。同时，也将 api-mocks 的方法导出，方便在其他文件中使用。
指导意义
使用 api-mocks，可以在前端开发过程中，快速地构建出一个后端接口的模拟数据，省去等待后端接口编写及联调的时间。同时，api-mocks 还支持路径参数的扩展，提高了模拟接口的灵活性，可以满足各类模拟数据的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ead81e8991b448dc2ca