前端开发中，我们经常需要联调后端接口。然而有时由于各种原因，后端接口还没有开发完成或者无法联调，这时我们就需要使用 mock 数据来模拟后端数据。常见的做法是手动编写或使用 mock.js 等插件。但是手动编写 mock 数据非常费时，而这些插件使用也比较繁琐。 此时 phonyapi 这个 npm 包就能够派上用场了，它能够快速搭建一个 mock 数据服务，方便前端开发。
phonyapi 的使用方法
首先，我们需要在项目中安装 phonyapi 工具，命令如下：
--- ------- -- --------
安装完成后，我们就可以在命令行中使用 phonyapi 命令了，例如：
-------- ------
这个命令表示启动一个 mock 数据服务，数据文件夹为 ./mock（mock 文件夹中的数据文件格式详见后文），默认端口为 3000。我们可以在浏览器中输入 http://localhost:3000/ 来查看 phonyapi 的默认欢迎页面。
接着，我们就可以在 phonyapi 中添加自己的数据了。在 ./mock 目录下新建一个数据文件 user.json，输入以下内容：
-
-------- -
- ----- -- ------- ---- --
- ----- -- ------- ---- -
-
-然后，在浏览器中输入 http://localhost:3000/users 查看数据，可以得到以下结果：
可以看到，phonyapi 自动将 user.json 中的数据转换成了 json 格式，并以 /users 作为接口路径。
phonyapi 的深入使用
- 给数据添加动态参数
有时我们需要传递参数给后端接口，并返回符合参数的数据。在 phonyapi 中，我们可以使用包含动态参数的文件名来模拟这个过程。
例如，我们需要模拟获取某个用户的数据，请求的 url 应该是 /users/1。如果使用原始的 user.json 文件，我们只能获取到整个列表数据。现在，我们可以重命名 user.json 为 user-_.json，其中 _ 表示动态参数占位符。然后再新建一个名为 user-1.json 的文件，输入以下内容：
- ----- -- ------- ---- -
这时我们在浏览器中输入 http://localhost:3000/users/1 即可获取到指定 id 为 1 的 user 数据。
- 使用 mock.js 随机生成数据
phonyapi 支持使用 mock.js 插件来生成随机数据，这样我们就可以快速生成一些真实的数据来进行前端开发。首先，我们需要在项目中安装 mock.js：
--- ------- ------
然后在数据文件中使用，例如我们需要一个随机生成的用户列表，数据文件为 user-random.json，内容如下：
-
----------- -
- -------- -- ------- -------- -
-
-其中，10 表示生成 10 条用户数据，"id|+1" 表示每个数据的 id 值自增 1，"@cname" 表示生成一个中文名字。这样我们在浏览器中输入 http://localhost:3000/users/random 即可获取到随机生成的用户数据。
- phonyapi 配合 axios 进行前后端联调
在实际开发中，我们一般使用 axios 来进行前后端联调。使用 phonyapi 与 axios 配合可以大大提高开发效率。以下是一个示例代码：
------ ----- ---- -------
----- --- - --------------
-------- -----------------------
--
------ ------- -
------------ -
------ -----------------
--
----------------- -
------ -----------------------
--
---------------- -
------ ------------------ -----
--
---------------- -
------ ------------------------------ -----
--
-------------- -
------ --------------------------
-
-在使用时，我们只需要将 axios 的基础路径设置为 http://localhost:3000 即可。这样我们可以直接调用 api.fetchUsers() 等方法来获取 phonyapi 提供的 mock 数据。
总结
通过本篇文章的介绍，相信大家已经了解了 phonyapi 的使用方法及深入应用。它可以帮助前端开发者快速搭建 mock 数据服务，方便前后端联调及前端单元测试。同时，配合 axios 等前端工具的使用，可以大大提高开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60059f8a81e8991b448ed4e4