Fetch API - 请求体数据

Fetch API 是一种现代技术，用于异步发送或接收数据，而无需刷新网页。它提供了一个在 Web 浏览器中创建 HTTP 请求的接口。几乎所有现代 Web 浏览器都支持它。我们也可以说，通过使用 Fetch API，我们可以从 Web 服务器获取 JSON 数据、HTML 页面等资源，并且可以使用不同的 HTTP 请求（如 PUT、POST 等）将数据发送到服务器。因此，在本文中，我们将学习什么是请求体数据，以及我们将如何使用请求体数据。

请求体数据

在 Fetch API 中，请求和响应都包含请求体数据。请求中的请求体数据是一个实例，包含我们想要发送到服务器的数据，而响应中的请求体数据是一个实例，包含用户请求的数据。它通常由 PUT 或 POST 请求用于将数据发送到服务器。它可以是 ArrayBuffer、TypedArray、DataView、Blob、File、String、URLSearchParams 或 FormData 的实例。在发送请求体数据时，您还需要在请求中设置一个头部信息，以便服务器知道数据的类型。

Request 和 Response 接口提供了多种提取请求体的方法，它们是：

Request.arrayBuffer() - 此方法用于解析一个 Promise，该 Promise 包含请求体的 ArrayBuffer 表示形式。
Request.blob() - 此方法用于解析一个 Promise，该 Promise 包含请求体的 Blob 表示形式。
Request.formData() - 此方法用于解析一个 Promise，该 Promise 包含请求体的 FormData 表示形式。
Request.json() - 此方法用于将请求体解析为 JSON，并解析一个 Promise，该 Promise 包含解析结果。
Request.text() - 此方法用于解析一个 Promise，该 Promise 包含请求体的文本表示形式。
Response.arrayBuffer() - 此方法用于返回一个 Promise，该 Promise 将解析包含响应体的 ArrayBuffer 表示形式。
Response.blob() - 此方法用于返回一个 Promise，该 Promise 将解析包含响应体的 Blob 表示形式。
Response.formData() - 此方法用于返回一个 Promise，该 Promise 将解析包含响应体的 FormData 表示形式。
Response.json() - 此方法用于将响应体解析为 JSON，并返回一个 Promise，该 Promise 将解析包含解析结果。
Response.text() - 此方法用于返回一个 Promise，该 Promise 将解析包含响应体的文本表示形式。

所有这些方法都返回一个 Promise，该 Promise 将解析包含请求体的实际内容。

请求体数据通常与 fetch() 函数一起使用。这里它是可选的，只有当您想要将数据发送到服务器时，才能使用 body 参数。

语法

fetch(resourceURL,{
   Method: 'POST',
   body:{
      Name: "Monika",
      Age: 34,
      City: "Pune"
   },
   headers: {'content-Type':'application/json'}
})

fetch() 函数的参数：

resourceURL - 它表示我们要获取的资源。它可以是字符串、请求对象或资源的 URL。
method - 它表示请求方法，例如 GET、POST、PUT 和 DELETE。
headers - 用于向请求添加头部信息。
body - 用于向请求添加数据。GET 或 HEAD 方法不使用它。

在下面的程序中，我们使用 POST 方法发送请求体数据。因此，我们创建了一个 HTML 代码，其中我们使用 JavaScript 脚本将数据发送到服务器。在脚本中，我们定义了一个 fetch() 函数，该函数使用 POST 请求方法将 body 参数中存在的数据发送到给定的 URL。这里的头部信息设置为“application/json”，表示我们正在发送数据。在将请求发送到服务器之前，我们使用 JSON.stringify() 函数将数据转换为 JSON 字符串。在从服务器收到响应后，我们检查响应是否正常。如果是，则我们使用 response.json() 函数将响应体解析为 JSON，然后在输出屏幕上显示结果。如果我们遇到任何错误，则 catch() 块将处理该错误。

示例

<!DOCTYPE html>
<html>
<body>
<script>
   // Retrieving data from the URL using the POST request
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Adding POST request
      method: "POST",
   
      // Adding body which we want to send
      body: JSON.stringify({
         id: 45,
         title: "Tom like finger chips",
         age: 34
      }),
      // Adding header
      headers:{"Content-type": "application/json; charset=UTF-8"}
   })
   // Converting received information into JSON
   .then(response =>{
      if (response.ok){
         return response.json()
      }
   })
   .then(myData => {
      // Display the retrieve Data
      console.log("Data Sent Successfully");
   
      // Display output
      document.getElementById("sendData").innerHTML = JSON.stringify(myData);
   }).catch(err=>{
      console.log("Found error:", err)
   });
</script>
   <h2>Sent Data</h2>
   <div>
      <!-- Displaying retrevie data-->
      <p id = "sendData"></p>
   </div>
</body>
</html>

输出

结论

因此，这就是我们如何在 Fetch API 中使用请求体数据的方法。使用请求体数据，我们可以将数据从 Web 浏览器发送到 Web 服务器，反之亦然。在请求体中，请求体数据仅与 PUT 和 POST 请求方法一起使用，因为使用此请求我们可以将数据发送到服务器。它不与 GET 请求一起使用，因为 GET 请求用于从服务器获取数据。现在在下一篇文章中，我们将学习 Fetch API 中的凭证。

打印页面