在前端开发中，我们有时需要在代码中获取请求的负载内容。例如，在处理表单提交时，我们可能需要检查用户输入的数据是否符合要求。
本文将介绍如何使用 JavaScript 和浏览器提供的 API 来检索请求负载。我们将涵盖以下主题：
- 请求负载概述
- XMLHttpRequest 对象
- Fetch API
- 示例代码
请求负载概述
请求负载是指在向服务器发送请求时传输的数据。通常，这些数据以键值对或 JSON 格式表示，并包含在请求体中。根据请求的类型和目的，请求负载可以包含不同的数据类型，例如文本、二进制数据或多部分数据。
为了访问请求负载，我们需要使用浏览器提供的 API。XMLHttpRequest 和 Fetch API 是最流行的两个 API，它们都可以用于发送 HTTP 请求并检索请求负载。
XMLHttpRequest 对象
XMLHttpRequest 对象是一个由浏览器提供的 API，用于发送 HTTP 请求并检索响应。我们可以使用 XMLHttpRequest.prototype.send() 方法来发送请求，然后使用 XMLHttpRequest.prototype.responseText 或 XMLHttpRequest.prototype.responseXML 属性来获取响应内容。
如果请求的内容类型为 JSON，则可以使用 JSON.parse() 方法将响应文本解析为 JSON 对象。以下是一个示例：
----- --- - --- ----------------- ---------------- ------------- ------------------------------------ -------------------- ---------- - ---------- - ----- -------- - ----------------------------- ---------------------- -- ----- ------- - - ----- -------- ---- -- -- ----------------------------------
在上面的示例中，我们首先创建一个 XMLHttpRequest 对象，并使用 open() 方法指定请求方法和 URL。接下来，我们使用 setRequestHeader() 方法设置请求头的内容类型为 JSON。然后，我们将数据负载转换为 JSON 字符串，并使用 send() 方法发送请求。
最后，在 onload 事件处理程序中，我们将响应文本解析为 JavaScript 对象，并输出到控制台。
Fetch API
Fetch API 是另一个由浏览器提供的 API，可用于发送 HTTP 请求并检索响应。与 XMLHttpRequest 不同，Fetch API 返回一个 Promise，因此可以使用异步函数或 .then() 方法处理响应。
要访问请求负载，我们可以使用 Response.prototype.json() 或 Response.prototype.text() 方法。以下是一个示例：
----- ------- - - ----- -------- ---- -- --
------------------ -
------- -------
-------- -
--------------- ------------------
--
----- -----------------------
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ----------------------在上面的示例中，我们使用 fetch() 函数发送 POST 请求，并将数据负载转换为 JSON 字符串。我们还通过 headers 参数设置了请求头的内容类型。
然后，我们通过 .then() 方法处理响应，并使用 Response.prototype.json() 方法将响应解析为 JavaScript 对象。最后，我们在控制台中输出了响应数据。
示例代码
以下是一个完整的示例，演示如何使用 XMLHttpRequest 和 Fetch API 访问请求负载：
-- ----- --------------
----- --- - --- -----------------
---------------- -------------
------------------------------------ --------------------
---------- - ---------- -
----- -------- - -----------------------------
----------------------
--
----- ------- - - ----- -------- ---- -- --
----------------------------------
-- ----- ----- ---
----- -------- - - ----- -------- ---- -- --
------------------ -
------- -------
-------- -
--------------- ------------------
--
----- ------------------------
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ----------------------在上面的示例
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/11257