在前端开发中，我们常常需要对后端 API 进行测试以及模拟数据。在这个过程中，Sinon-mock-server 这个 npm 包会帮助我们快速进行 mock 数据的创建。本文将会详细介绍如何使用 Sinon-mock-server 完成 API 的模拟和数据 mock。
Sinon-mock-server 的概念与特点
Sinon-mock-server 是一个能够帮助我们模拟 API 接口的 npm 包。它允许我们创建 mock AJAX 请求并与真实 AJAX 请求进行隔离。简要的概括一下 Sinon-mock-server 的特点:
- 为 AJAX 请求提供 mock、stub、spy 功能
- 当前流行的 MVC 框架均有支持
- 配置简单，使用方便
入门教程
在接下来的教程中，我们将以一个简单的 GET 请求为例。首先，我们需要安装 Sinon-mock-server 包。
npm install sinon-mock-server --save-dev
安装完成后，我们需要为这个包创建一个新的 mock。在你的测试钩子之后，添加以下代码即可：
const mockServer = require('sinon-mock-server');
const server = mockServer.create();Mock 服务创建
接着，我们需要创建一个 Mock 服务，这个服务将会在浏览器中处理 AJAX 请求的过程，而不是从后端请求数据。创建方法如下：
server.respondWith('GET', '/api/test', [200, { "Content-Type": "application/json" }, JSON.stringify({ "status": 200, "message": "mock test api" })]);以上代码将会创建一个 GET 请求的 mock，mock 的地址是 /api/test，响应状态码是 200，其中包含 JSON 数据 {"status": 200, "message": "mock test api" }。
简单解释以下这个回调函数中的参数：
- GET 请求：
'GET' - 模拟的 URL 地址：
'/api/test' - HTTP 状态码：
200 - response Headers:
{ "Content-Type": "application/json" } - 响应内容：
JSON.stringify({ "status": 200, "message": "mock test api" })
启动服务
创建完 Mock 服务后，我们需要执行以下命令来启动服务器:
server.start();
此时，我们就可以在浏览器中，请求刚才 mock 的 URL 地址，返回值是我们刚才设定的 {"status": 200, "message": "mock test api" }。
服务关闭
最后，在前端测试结束后，我们需要销毁 Mock 服务。销毁方法如下：
server.stop();
以上，就是一个简单的使用 Sinon-mock-server 的流程。你可以根据自己的需求，继续对其 API 进行学习和拓展。
高阶教程
在开发过程中，我们可能还需要对 POST、PUT、DELETE 等更复杂的请求进行 mock 数据的创造。针对这些需求，Sinon-mock-server 提供了更详细的 API，可以让我们更好的掌管 AJAX 请求。在此，分别举例介绍。
POST 请求
server.respondWith('POST', '/api/test', function (xhr) {
var data = JSON.parse(xhr.requestBody);
// 做一些处理逻辑，返回模拟的数据
xhr.respond(200, { "Content-Type": "application/json" }, JSON.stringify(data));
});在 POST 的响应中，我们需要访问请求的数据体，这个数据体存放在一个叫做 requestBody 的属性中。随后，将模拟处理后的数据存储起来，并使用 respond() 方法将数据返回给浏览器。
PUT/DELETE 请求
与 POST 请求类似。
server.respondWith('PUT', '/api/test', function (xhr) {
var data = JSON.parse(xhr.requestBody);
// Do something with data
xhr.respond(200, { "Content-Type": "application/json" }, JSON.stringify({ "status": 200, "data": data }));
});
server.respondWith('DELETE', '/api/test', [200, { "Content-Type": "application/json" }, '']);重载服务
另外，在某些情况下，我们权限开发人员在启动 Mock 时，可能需要读取 .env 等文件中的静态参数。因此，提供了能够重载 Mock 服务的方法，以达到动态更新功能参数的目的，示例代码如下：
-- -------------------- ---- -------
---------------- - --------
----- ------ - -
---------- -------
----- ----
--
---------------
----------
----- -
----- ---------------------
-
---在以上代码中，我们首先将 name 的值变更成 kevin。随后，使用 reload 方法重载配置文件。当重载完成后，就可以使用新配置的服务器来模拟测试的 API 了。
总结
本教程简要介绍了 Sinon-mock-server 的基本实现方法及高阶 API。当你在 mock AJAX 请求或 是 数据测试方面遇到问题时，使用 Sinon-mock-server 或许会是帮助你解决问题的利器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e281e8991b448e06c3