在前端开发中，模拟 Ajax 请求的返回数据是非常有必要的。mock-xmlhttprequest 这个 npm 包能够让我们方便地模拟 xhr 请求，并且可以在测试阶段使用。下面我们来详细介绍一下如何使用 mock-xmlhttprequest。
什么是 mock-xmlhttprequest？
mock-xmlhttprequest 是一款用于模拟 XMLHttpRequest 请求的数据返回结果的 NPM 包。主要用于测试阶段，可以模拟服务器返回的数据。这样在模拟数据时，可以方便地调试和验证。mock-xmlhttprequest 本身是基于 XmlHttpRequest 所写的，所以它完美地模拟了真实的 xhr 请求。
安装
使用 npm 安装 mock-xmlhttprequest：
npm install mock-xmlhttprequest --save-dev
安装之后，我们就可以在项目中使用它了。
使用方法
在使用 mock-xmlhttprequest 之前，首先我们需要引入它：
import MockHttpRequest from 'mock-xmlhttprequest';
引入之后我们就可以开始使用 mock-xmlhttprequest 了。下面我们来看一个简单的例子：
-- -------------------- ---- -------
------ --------------- ---- ----------------------
----- --- - --- ------------------
------------- ------------ ------------- ---- -
----- ------------ - -
----- ----
-------- ----------
----- --- -- --
--
------------------ - --------------- ------------------ ---
----------------------------------------
----------
---
--------------- -------------
-----------
---------------------- - ---------- -
-- --------------- --- -- -
--------------------------
------------------------------------------
-
--上面的代码模拟了一个 GET 请求，模拟了服务器返回的数据。我们可以从下面两行代码中看到输出的结果：
console.log(xhr.response); // 输出：{"code":200,"message":"success","data":[1,2,3]}
console.log(JSON.parse(xhr.responseText)); // 输出：{code: 200, message: "success", data: [1,2,3]}在上面的代码中，我们首先创建了一个 MockHttpRequest 对象 xhr。然后，在 xhr.on('GET', '/api/list', function(req, res){...}); 中定义请求方式及请求 URL，并在回调函数中指定返回的数据。在回调函数中，我们创建一个 responseData 对象，并设置了一些值。最后，我们将 responseData 序列化为 JSON 格式的字符串并返回到浏览器上，然后在浏览器中输出了结果。
最后我们注意到，当我们的请求发出后，我们使用 xhr.onreadystatechange 监听 xhr 对象的状态，当 xhr 对象的状态码变为 4 时，我们就可以通过 xhr.response 和 xhr.responseText 来看到我们的测试返回结果。
总结
本文主要介绍了 npm 包 mock-xmlhttprequest 的使用方法。mock-xmlhttprequest 能够帮助我们方便地模拟 xhr 请求，并且可以在测试阶段使用，能够帮助我们更方便地进行数据的调试和验证。我相信，通过本文的介绍，开发者们对 npm 包 mock-xmlhttprequest 能够更好地去理解和使用它，从而更加高效地进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb658b5cbfe1ea0611507