HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

Fetch API - Body 正文数据

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

Body 正文数据

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

Request和Response接口提供了多种提取body的方法，它们是 −

  • Request. arrayBuffer() − 此方法用于解析具有请求正文的 ArrayBuffer 表示形式的promise 。

  • Request.blob() − 此方法用于解析带有请求正文的 blob 表示形式的promise 。

  • Request.formData() − 此方法用于解析具有请求正文的 formData 表示形式的promise 。

  • Request.json() − 该方法用于将请求体解析为 JSON，并使用解析结果解析一个 Promise。

  • Request.text() − 此方法用于解析具有请求正文的文本表示形式的promise 。

  • Response.arrayBuffer() − 此方法用于返回一个promise ，该promise 将使用响应正文的 ArrayBuffer 表示形式进行解析。

  • Response.blob() − 此方法用于返回一个promise ，该promise 将使用响应正文的 Blob 表示形式进行解析。

  • Response.formData() − 此方法用于返回一个promise ，该promise 将使用响应正文的 FormData 表示形式进行解析。

  • Response.json() − 此方法用于将响应正文解析为 JSON 并返回一个将解析解析结果的 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 中使用 Body Data 的方式。 使用数据体，我们可以将数据从 Web 浏览器发送到 Web 服务器，反之亦然。 在请求正文中，正文数据仅与 PUT 和 POST 请求方法一起使用，因为使用此请求我们可以将数据发送到服务器。 它不与 GET 请求一起使用，因为 GET 请求用于从服务器获取数据。 在下一篇文章中，我们将学习 Fetch API 中的凭据。

❮ 上一节 下一节 ❯