Ajax 简明教程

Fetch API - Body Data

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

Body Data

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

Request 和 Response 接口提供了各种方法来提取正文,它们是 −

  1. Request. arrayBuffer() − 此方法用于解决 ArrayBuffer 表示请求正文的承诺。

  2. Request.blob() − 此方法用于解决 blob 表示请求正文的承诺。

  3. Request.formData() − 此方法用于解决 formData 表示请求正文的承诺。

  4. Request.json() − 此方法用于解析请求正文为 JSON 并解决解析结果的承诺。

  5. Request.text() − 此方法用于解决具有请求正文的文本表示的承诺。

  6. Response.arrayBuffer() − 此方法用于返回一个 promise,它将解决一个 ArrayBuffer 表示的响应正文。

  7. Response.blob() − 此方法用于返回一个 promise,它将解决一个 Blob 表示的响应正文。

  8. Response.formData() - 此方法用于返回一个 promise ,该 promise 可用作响应正文的 FormData 表示形式解析出来。

  9. Response.json() - 此方法用于将响应正文解析为 JSON,并返回一个 promise 以根据解析结果解析出来。

  10. Response.text() - 此方法用于返回一个 promise ,该 promise 可用作响应正文的文本表示形式解析出来。

所有这些方法均返回一个 promise ,该 promise 可用作实际正文内容解析出来。

正文数据通常与 fetch() 函数一起使用。在本文档中,您不必非用正文参数不可,只有在要向服务器发送数据时才可以使用该参数。

Syntax

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

fetch() 函数的参数 -

  1. resourceURL - 它表示我们希望获取的资源。它可以是字符串、请求对象或资源的 URL。

  2. method - 它表示请求方法,例如 GET、POST、PUT 和 DELETE。

  3. headers - 它用于向您的请求添加 header。

  4. body - 它用于向您的请求添加数据。GET 或 HEAD 方法不使用它。

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

Example

<!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>

Output

body data

Conclusion

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