在前端开发中，我们经常要和后端接口进行交互，而在开发和测试过程中，我们无法保证后端接口已经就绪，因此可能会出现无法进行测试的情况。为了解决这个问题，我们可以使用 Mock 数据，这时候就需要一个 StubContractor 工具。本文将介绍 npm 包 stubcontractor 的使用方法，帮助大家更好的进行前端开发和测试。
安装
使用 npm 安装 stubcontractor：
npm install stubcontractor --save-dev
使用
配置文件
首先，我们需要创建一个配置文件 stubcontractor.json，该文件包含了需要配置的 Mock 数据。
-- -------------------- ---- ------- - ------- ------------ ------- ------- -------- ------ -------- -- ---------- - ------ ------------- --------- ----- -- ----------- - ------- -- ----- ---- ------- ------ -- - ----- ---- ------- ----- -- - -- -展开代码
这个配置文件定义了一个 Mock 数据，当我们的应用程序向 localhost:8888/api/users 发送 GET 请求时，返回的数据为：
[{ "id": "1", "name": "Alex" }, { "id": "2", "name": "Bob" }]
其中，host、port、https 分别为 Mock 数据的主机地址、端口号、是否是 https 请求；stubs 表示需要配置的 Mock 数据。
启动 StubContractor
在命令行中，输入以下命令启动 StubContractor：
npx stubcontractor --config stubcontractor.json
这个命令将使用配置文件 stubcontractor.json 来启动 StubContractor。
使用 Mock 数据
在前端代码中，我们只需要将请求地址改为 localhost:8888/api/users，就可以获取到 Mock 数据。
fetch('http://localhost:8888/api/users') .then(res => res.json()) .then(data => console.log(data))
这个 fetch 请求就可以获取到上面定义的 Mock 数据。
动态 Mock 数据
我们可以通过修改 stubcontractor.json 文件来修改 Mock 数据，但这需要重启 StubContractor 才能生效。为了方便开发和测试，StubContractor 允许我们通过 HTTP 请求动态修改 Mock 数据。
以向 /updateStub POST 请求为例，我们可以发送以下请求来修改 Mock 数据：
-- -------------------- ---- ------- - ---------- - ------ ------------- --------- ----- -- ----------- - ------- -- ----- ---- ------- --------- -- - -展开代码
这个请求将会向 StubContractor 发送一个请求，修改 /api/users GET 请求的返回数据为：
[{ "id": "3", "name": "Charlie" }]
无需重启 StubContractor，这个新的 Mock 数据将会立即生效。
示例代码
为了更好地理解如何使用 stubcontractor，这里提供一个示例代码。
server.js
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- ---- - ----- --------------------- ----- ---- -- - ---------------------------------------- --------- -- ----------- ---------- -- - --------------- -- --- ---------------- -- -- - --------------------- --------------------------- ---展开代码
这个示例代码中，我们定义了一个 /api/users 的接口，该接口会向 Mock 数据地址发送 GET 请求以获取数据。
stubcontractor.json
-- -------------------- ---- ------- - ------- ------------ ------- ------- -------- ------ -------- -- ---------- - ------ ------------- --------- ----- -- ----------- - ------- -- ----- ---- ------- ------ -- - ----- ---- ------- ----- -- - -- -展开代码
在这个示例中，我们定义了一个 Mock 数据，该数据会被 server.js 中的接口所调用。
修改 Mock 数据
发送以下 POST 请求来修改 Mock 数据：
-- -------------------- ---- ------- - ---------- - ------ ------------- --------- ----- -- ----------- - ------- -- ----- ---- ------- --------- -- - -展开代码
接着发送 GET 请求到 http://localhost:3000/api/users，我们可以看到返回的数据包含了 Charlie 的信息：
[{ "id": "3", "name": "Charlie" }]
结论
StubContractor 是一个非常有用的 Mock 数据工具，它可以帮助我们更好的进行前端开发和测试。本文介绍了如何使用 npm 包 stubcontractor，希望可以对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/80499
