前端开发的过程中，经常需要在本地搭建一个 mock server 来模拟后端 API 的返回数据，以便开发和调试。@availity/mock-server 是一个非常方便的 npm 包，可以快速搭建一个 mock server，并支持添加路由和请求拦截等高级功能。本文将详细介绍 @availity/mock-server 的使用方法和注意事项。
安装和启动
安装 @availity/mock-server 最简单的方法是通过 npm：
--- ------- -- ---------------------
安装完成后，就可以通过以下命令来启动 mock server：
----------- -----
默认情况下，@availity/mock-server 会读取当前目录下的 mock 文件夹，并自动解析其中的 .js 和 .json 文件，作为路由的配置文件。例如，如果在 mock 文件夹下有一个 users.json 文件，其内容如下：
-
-------- -
-
----- --
------- -------
--
-
----- --
------- -----
-
-
-则可以通过以下 URL 访问该数据：
---------------------------
增加路由
如果需要自定义路由，可以在 mock 文件夹下创建一个 .js 文件，并通过 module.exports 导出一个函数。该函数接受一个 express.Router 对象作为参数，可以通过该对象来添加各种路由和请求拦截器。例如，下面是一个 mock/users.js 文件的示例：
----- ------- - -------------------
-------------- - ---------------- -
-------------------- ------------- ---- -
----------
-
--- --
----- -------
--
-
--- --
----- -----
-
---
---
------------------------ ------------- ---- -
----------
--- --------------
----- ----- - - -------------
---
---
--该文件定义了两个路由：/users 和 /users/:id。前者返回一个包含两个用户的数组，后者返回一个根据参数 id 进行动态生成的用户对象。
添加请求拦截器
除了添加路由，@availity/mock-server 还支持添加请求拦截器，在请求到达路由之前对请求进行拦截和修改。例如，下面是一个添加了请求拦截器的 mock/users.js 文件的示例：
----- ------- - -------------------
-------------- - ---------------- -
-------------------- ------------- ---- -
----------
-
--- --
----- -------
--
-
--- --
----- -----
-
---
---
------------------------ ------------- ---- -
----------
--- --------------
----- ----- - - -------------
---
---
------------------------ ------------- ---- -
----------
-
--- --
----- -------
--
-
--- --
----- -----
-
---
---
---------------------------- ------------- ---- -
----------
--- --------------
----- ----- - - -------------
---
---
------------------------ ---- ----- -
-- ------------------------------ -
------- - ----------------------- ----
-
-------
---
--该文件添加了两个以 /api 开头的路由，并添加了一个请求拦截器，将所有以 /api 开头的 URL 的前缀 /api 去掉。例如，访问以下 URL：
-------------------------------
会返回与 /users 相同的结果。
总结
通过 @availity/mock-server，我们可以快速搭建一个 mock server，模拟各种请求和返回数据，并且支持添加路由和请求拦截器等高级功能。在前端开发中，mock server 是一个必不可少的工具，能够加速开发和测试的效率。希望本文的介绍能够给大家带来帮助和启示。
示例代码
下面是完整的示例代码，在当前文件夹下创建 mock 文件夹，并将以下三个文件放在其中：users.json、mock/users.js 和 mock/api.js。
users.json
-
-------- -
-
----- --
------- -------
--
-
----- --
------- -----
-
-
-mock/users.js
----- ------- - -------------------
-------------- - ---------------- -
-------------------- ------------- ---- -
----------
-
--- --
----- -------
--
-
--- --
----- -----
-
---
---
------------------------ ------------- ---- -
----------
--- --------------
----- ----- - - -------------
---
---
--mock/api.js
----- ------- - -------------------
-------------- - ---------------- -
------------------------ ------------- ---- -
----------
-
--- --
----- -------
--
-
--- --
----- -----
-
---
---
---------------------------- ------------- ---- -
----------
--- --------------
----- ----- - - -------------
---
---
------------------------ ---- ----- -
-- ------------------------------ -
------- - ----------------------- ----
-
-------
---
--启动 mock server：
----------- -----
访问以下 URL：
--------------------------- ----------------------------- ------------------------------- ---------------------------------
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/196475