简介
@offirgolan/nise 是一个基于 XMLHttpRequest 的模拟 HTTP 响应生成器，支持对 Ajax 请求进行拦截，并且返回我们自己设定的假数据。它可以很好地用于前端开发的单元测试、端到端测试以及无服务器的本地测试环境。
安装
在项目根目录下执行以下命令：
npm install @offirgolan/nise
使用
基本使用
-- -------------------- ---- -------
------ ---- ---- -------------------
----- ------ - -------------------------
-- ----
------------------------- ------------- - ---- - --------------- ------------------ -- ---------------- ----- ------- ---- -- -- ---
-- ----
----- --- - --- -----------------
--------------- --------------
---------------------- - -------- -- -
-- --------------- --- ------------------- -- ---------- --- ---- -
------------------------------------------
-
--
-----------
-- ----
-----------------运行上面的代码，控制台输出：
{ name: 'Mary', age: 26 }这里我们使用 nise.fakeServer.create() 创建了一个假服务器对象，使用 server.respondWith() 定义了对于 URL 为 /api/users 的 GET 请求，假服务器会返回状态码为 200、响应头为 Content-Type: application/json 的 JSON 数据。最后我们依次发送请求和响应请求，获取响应结果。
请求匹配
上面的示例中，我们简单粗暴地让假服务器响应任何一个 URL 为 /api/users 的 GET 请求，这在实际开发中显然不太合理。我们可能会根据请求的一些参数或者头信息做出不同的响应或者不响应。我们可以使用 server.respondWith() 的第一个参数进行匹配。
在最简单的情况下，第一个参数可以是字符串类型的 URL，例如：
server.respondWith('GET', '/api/users', [ 200, {}, 'Success!' ]);这样，只有 URL 路径为 /api/users 并且请求方式为 GET，假服务器才会返回状态码为 200、响应内容为 Success! 的响应。
我们还可以传入正则表达式，例如：
server.respondWith(/\/api\/users\/(\d+)/, [ 200, {}, 'Success!' ]);这里，首先使用正则表达式 \/api\/users\/(\d+) 匹配出了 /api/users/ 开头，后跟一个数字 ID 的 URL。然后，不论 ID 是多少，假服务器都会返回状态码为 200、响应内容为 Success! 的响应。
另外，我们也可以使用一个回调函数作为第一个参数，这个回调函数接收两个参数，分别为完整请求 URL 和请求对象。例如：
server.respondWith((requestURL, request) => {
if (request.method === 'POST' && requestURL.indexOf('/api/users') === 0) {
return [ 200, {}, 'Success!' ];
}
});这里我们判断了请求方式为 POST 且 URL 以 /api/users 开始的请求，假服务器会返回一个状态码为 200、响应内容为 Success! 的响应。
请求拦截
有了 respondWith()，我们可以很方便地定义对于特定请求的响应，但在实际开发中，我们经常需要对于请求进行拦截，例如检验请求参数或者阻断特定的请求。这时，我们需要使用 server.use()。
server.use((request) => {
if (request.method === 'GET' && request.url.indexOf('/api/users') === 0) {
return;
}
throw new Error(`未定义的请求：${request.method} ${request.url}`);
});这里，我们让假服务器拦截所有的 /api/users 的 GET 请求，并返回空响应。如果请求的不是 GET 请求或者不以 /api/users 开始，我们则抛出一个错误。
延迟与超时
在实际开发，我们经常会需要测试在请求响应过程中的状态、样式或者交互，但是由于真实的网络环境或者服务器性能的问题，这些测试很难进行。@offirgolan/nise 给我们提供了一些便捷的 API，例如：
server.respondWith('GET', '/api/users', function (xhr) {
setTimeout(function () {
xhr.respond(200, { 'Content-Type': 'application/json' }, JSON.stringify({ name: 'Mary', age: 26 }));
}, 3000);
});这里，我们使用 setTimeout 延迟了 3 秒钟再响应请求，这样我们就可以模拟请求响应时间比较长的场景了。如果你希望让请求超时，可以在请求对象上设置 timeout 属性即可：
-- -------------------- ---- -------
----- --- - --- -----------------
----------- - -----
--------------- --------------
---------------------- - -------- -- -
-- --------------- --- ------------------- -- ---------- --- ---- -
------------------------------------------
-
--
-----------这里，我们设置了请求的最长等待时间为 1 秒钟，在请求没有完成的情况下，xhr 将会触发超时回调。
总结
@offirgolan/nise 使我们可以很便捷地模拟服务器响应，在前端开发的测试和模拟环境中扮演着重要的角色。在文章中，我们介绍了这个库的基本用法，涉及了请求的匹配、拦截、延迟和超时等方面的基本操作。对于使用此库的开发者来说，这篇文章提供了一些详细的指导和示例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb170b5cbfe1ea0611103