什么是 local-xmlhttprequest？
local-xmlhttprequest 是一个在 Node.js 和浏览器环境下操作 XMLHttpRequest 的 npm 包。它可以在浏览器中模拟 XMLHttpRequest 请求，方便前端开发者在本地测试接口数据。
安装 local-xmlhttprequest
在终端中运行以下命令：
npm install local-xmlhttprequest
如此便成功安装了 local-xmlhttprequest 包。
使用 local-xmlhttprequest
local-xmlhttprequest 与浏览器自带的 XMLHttpRequest 一样，使用起来非常简单。
-- -------------------- ---- -------
----- -------------- - ----------------------------------------------
--- --- - --- ----------------
--------------- ------------- -----
---------------------- - -------- -- -
-- --------------- --- - -- ---------- --- ---- -
-----------------------------
-
-
----------其中，xhr.open() 用于指定请求方法以及请求的地址和是否是异步的。xhr.onreadystatechange 用于指定请求状态改变的回调函数。xhr.send() 用于发送请求。
异步请求和同步请求
在 local-xmlhttprequest 中，异步请求是默认的。可以把 xhr.open() 方法的第三个参数设置为 false 来变成同步请求。但是在浏览器中 strongly not recommended。
xhr.open('GET', '/api/users', false)模拟请求头
模拟请求头只需要通过 setRequestHeader() 方法来设置请求头即可。如下：
xhr.open('GET', '/api/users', true)
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
xhr.send()这里设置了 Content-Type 为 application/json。
模拟 POST 请求
在 local-xmlhttprequest 中，模拟 POST 请求只需要将 xhr.open() 方法的第一个参数设置为 POST，并在 send() 方法中传入需要提交的数据，如下：
-- -------------------- ---- -------
---------------- ------------- -----
------------------------------------ -------------------
---------------------- - -------- -- -
-- --------------- --- - -- ---------- --- ---- -
-----------------------------
-
-
-------------------------
----- ------
---- --
---这里通过 JSON.stringify() 方法将提交的数据转化成相应格式的字符串。
使用 local-xmlhttprequest 的注意事项
- local-xmlhttprequest 中的 xhr.open() 方法只支持 GET 和 POST 方法，其他方法将会抛出错误。
- local-xmlhttprequest 中的异步请求默认是不带跨域验证的。如需带上跨域验证，可以将 xhr.withCredentials 属性设置为 true。
- local-xmlhttprequest 中不支持上传文件。
小结
通过本篇文章，我们了解到了在 Node.js 和浏览器环境下操作 XMLHttpRequest 的 npm 包 local-xmlhttprequest 的使用方法。通过模拟请求头和模拟 POST 请求，我们可以在本地进行接口测试，方便快捷地找到接口问题和错误。但是在使用 local-xmlhttprequest 时需要遵守注意事项，以免因此导致不必要的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-local-xmlhttprequest