介绍
在前端开发中，我们经常需要和后端接口进行开发和联调，但是在后端接口没有开发完毕的情况下，前端却需要继续开发和调试。这时，我们就需要一个 mock 工具来模拟后端接口数据，从而提高开发效率。
mock-router-service 是一款基于 express 的 mock 服务工具，可以快速地搭建 mock 服务，并且支持路由匹配、请求拦截、数据模板等特性。使用这个工具可以轻松地模拟后端数据接口，从而无需依赖后端接口进行开发。
在接下来的文章中，我们将详细介绍 mock-router-service 的使用方法。
安装
使用 npm 安装：
npm install mock-router-service --save-dev
使用
创建 mock 服务
首先，我们需要创建一个 mock 服务。在项目根目录下新建一个 server.js 文件：
-- -------------------- ---- -------
----- ------- - ------------------
----- --- - ---------
----- ----------------- - ------------------------------
----- ----------- - --- ----------------------
----------------------------- -
------------ ---
------ ---------
------- -
------- ---------
------------ --
-
--
-----------------------在这段代码中，我们先引入 express 和 mock-router-service，并创建了一个 express 实例 app。然后，我们调用 MockRouterService 构造函数来创建一个 mock 服务，将 express 实例传入其中。
接下来，我们使用 mockService 的 mock 方法来定义一个 mock 接口。这个接口的地址为 /api/user，返回的数据格式为：
{
"code": 5,
"msg": "张三",
"data": {
"name": "李四",
"age": 25
}
}其中 code 是 1-10 中的一个随机数，msg 是一个中文名字，data 为一个对象，包含一个中文名字和一个 18-50 中的随机数。
最后，我们使用 mockService 的 start 方法来启动 mock 服务，端口为 3000。
发起请求
现在，我们已经成功创建了一个 mock 服务。接下来，我们可以使用任意的 http 请求工具来发起一个请求。例如，在浏览器中访问 http://localhost:3000/api/user，就会返回一条 mock 数据。
当然，在实际的开发中，我们通常会在前端代码中使用一个 http 请求库来发起请求。例如，我们可以使用 axios 或者 fetch 这样的库来发起请求。
import axios from 'axios'
axios.get('/api/user').then(response => {
console.log(response.data)
})在这个例子中，我们使用 axios 发起了一个 get 请求，请求的地址为 /api/user。当请求成功后，会将返回的数据打印到控制台中。如果一切正常的话，控制台中应该能看到一条与之前定义的 mock 数据相同的数据。
高级用法
mock-router-service 还提供了一些高级特性，例如：
路由匹配
我们可以在 mock 方法中使用正则表达式来匹配路由：
mockService.mock(/^\/api\/user\/(\d+)/, (req, res) => {
const id = req.params[0]
res.json({
id,
name: '@cname',
address: '@city'
})
})在这个例子中，我们使用了一个正则表达式来匹配 /api/user/1 这样的路由，其中的数字是一个参数。在返回的数据中，我们将这个参数作为 id 返回，并且还包含了一个随机的中文名字和地址。
请求拦截器
我们可以使用 onRequest 方法来定义一个请求拦截器，例如：
mockService.onRequest((req, res, next) => {
console.log(req.method, req.url, req.query)
next()
})在这个例子中，我们使用 onRequest 方法来定义了一个请求拦截器，这个拦截器会在每个请求到来时执行。在这个拦截器中，我们简单地打印请求的方法、地址和参数，并调用了 next() 方法，将请求传递给后续的处理函数。
响应拦截器
我们可以使用 onResponse 方法来定义一个响应拦截器，例如：
-- -------------------- ---- -------
---------------------------- ---- ----- -- -
----- ----- - -----
--------------------------- ------- ----------
------ -
----- --
-------- -----
----
-
--在这个例子中，我们使用 onResponse 方法来定义了一个响应拦截器，这个拦截器会在每个请求返回时执行。在这个拦截器中，我们设置了一个固定的 token，并且将其加入到响应头中。然后，我们将返回的数据封装到一个格式化的对象中，包含 code、message 和 data 三个属性，并返回这个对象。这样做的目的是为了统一接口返回格式。
结语
在本文中，我们介绍了 npm 包 mock-router-service 的使用方法。这个工具可以帮助我们快速地搭建 mock 服务，在前端开发和联调中提高效率。除此之外，mock-router-service 还支持路由匹配、请求拦截、数据模板等特性，可以应对各种复杂的 mock 场景。希望本文对大家有所帮助，也希望大家能够善用这个工具，为前端开发加油助力！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005561481e8991b448d309c