Fetch API - 发送 JSON 数据

Fetch API 用于异步发送或接收数据，而无需刷新网页。在 Fetch API 中，我们可以以各种格式发送数据，如 JSON、URL 编码形式、Text、FormData、Blob 或 ArrayBuffer。在所有这些形式中，JSON（JavaScript 对象表示法）数据是使用 Fetch 发送数据最常用的格式，因为它简单、轻量级并且与大多数编程语言兼容。JSON 数据通常按以下格式创建 -

Const JSONData = {
   name: "Monika",
   Id: 293,
   Age: 32,
   City: "Pune"
};

其中 name、id、Age 和 City 是属性，Monika、293、32 和 Pune 是它们的值。

Fetch API 通常将 JSON 数据作为请求正文中的有效负载发送，也可以从响应正文中接收。数据被序列化为字符串，因为很容易将数据从一个系统传输到另一个系统。

在处理 JSON 数据时，Fetch API 对 JSON 数据执行两个主要操作 -

序列化 − 在请求中发送 JSON 数据时，我们需要使用 “JSON.stringify（）” 函数将值转换为 JSON 字符串格式。此函数将对象或值作为输入参数，并返回表示 JSON 格式的字符串。由于数据序列化，我们可以轻松地通过网络传输数据。

语法

 JSON.stringify()

解析 − 解析是我们将响应中收到的 JSON 字符串转换回 JavaScript 对象或值的过程。可以使用 response.json（） 函数完成 JSON 数据的这种解析。此函数将响应对象作为参数，并返回一个 Promise，该 Promise 在解析的 JSON 数据或 JavaScript 对象中解析。

语法

 response.json()

发送 JSON 数据

要发送 JSON 数据，Fetch API 使用以下方式 -

• 使用 fetch（） 函数
• 将 fetch（） 函数与 async/await 一起使用
• 使用 request 对象

方法 1 - 使用 fetch（） 函数

我们可以使用 fetch（） 函数发送数据。在这个函数中，我们在 body 参数中创建 JSON 数据，并使用 POST 请求方法在指定的 URL 上发送数据。

在下面的程序中，我们将使用 fetch（） 函数发送 JSON 数据。fetch（） 函数用于创建请求。该请求包含 POST 方法，它告诉我们要发送数据，一个包含 JSON 数据的正文，该数据使用 stringify（） 转换为字符串，以及指定我们正在发送 JSON 数据的标头。发送请求后，服务器返回一个 Promise，该 Promise 将解析为 Response 对象，并使用 .json（） 解析 JSON 数据并在控制台日志中显示结果。如果我们遇到错误，则错误由 catch 块处理。

<!DOCTYPE html>
<html>
<body>
<script>
   // Sending JSON data using a POST request
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Setting POST request
      method: "POST",
   
      // Add a body which contains JSON data
      body: JSON.stringify({
         id: 290,
         title: "Today is the rainy day",
      }),
      // Setting headers
      headers:{"Content-type": "application/json; charset=UTF-8"}
   })
   // Converting response to JSON
   .then(response => response.json())
   .then(myData => {
      console.log("Data Sent Successfully");
      // Display output in HTML page
      document.getElementById("sendData").innerHTML = JSON.stringify(myData);
   })
   .catch(err=>{
      console.error("We get an error:", err);
   });
</script>
<h2>Sent Data</h2>
<div>
   <!-- Displaying data-->
   <p id = "sendData"></p>
</div>
</body>
</html>

输出

方法 2 - 将 fetch（） 函数与 async/await 一起使用

我们还可以使用 fetch（） 函数和 async/await 发送 JSON 数据。Async/await 允许您创建一个异步程序，其行为更像同步程序，使其更易于学习和理解。

在下面的程序中，我们将使用带有 async/await 的 fetch（） 函数发送 JSON 数据。为此，我们创建了一个 async 函数。在该函数中，我们使用 try 块，该块使用 fetch（） 函数以及资源 URL、POST 请求方法、标头和 body（字符串格式的 JSON 数据）参数将 JSON 数据发送到给定的 URL。它还将 await 关键字与 fetch（） 函数一起使用，该函数用于等待来自服务器的响应。如果响应成功，则我们使用 .json（） 函数解析服务器返回的响应。如果响应的状态代码包含不成功的代码，则 else 块将运行。如果我们在 fetch 操作期间遇到错误，则该错误由 catch 块处理。

<!DOCTYPE html>
<html>
<body>
<script>
   async function sendingJSONData(){
      try{
         const retrunResponse = await fetch("https://jsonplaceholder.typicode.com/todos", {
            // Setting POST request to send data
            method: "POST",
   
            // Add body which contains JSON data
            body: JSON.stringify({
               id: 290,
               title: "Today is the rainy day",
            }),
            // Setting headers
            headers:{"Content-type": "application/json; charset=UTF-8"}
         });
         if (retrunResponse.ok){
            // Handling response
            const returnData = await retrunResponse.json();
            console.log("Data send Successfully");
   
            // Display output in HTML page
            document.getElementById("sendData").innerHTML = JSON.stringify(returnData);
         } else {
            console.log("We found error", retrunResponse.status);
         }
      } catch(err) {
         // Handling error if occur
         console.error("Error is:", err)
      }
   }
   sendingJSONData();
</script>
<h2>Sent Data</h2>
<div>
   <!-- Displaying data-->
   <p id = "sendData"></p>
</div>
</body>
</html>

输出

方法 3 - 使用请求对象

我们还可以使用 request 对象发送 JSON 数据。它是 fetch（） 函数的替代方法，用于向服务器发送请求。请求对象还使用 POST 方法在指定 URL 上发送 JSON 数据。请求对象是使用 Request 接口的 Request（） 构造函数创建的。request 对象在通过 fetch（） 函数发送请求之前创建或配置请求时提供了更大的灵活性。它还允许我们添加其他选项，如 header、caching、request method 等。

在下面的程序中，我们将使用 request 对象发送 JSON 数据。因此，使用 Request（） 构造函数，我们创建一个请求对象以及资源 URL、POST 请求方法、body（使用 stringify（） 以字符串格式的 JSON 数据）和标头等参数。现在我们在 fetch 函数中传递 newRequest 对象以发送请求并使用 .then（） 函数处理响应，并解析响应 using.json（）。如果我们在 fetch 操作期间遇到错误，则该错误由 catch 块处理。

<!DOCTYPE html>
<html>
<body>
<script>
   // Creating request object
   const newRequest = new Request("https://jsonplaceholder.typicode.com/todos", {
      // Setting POST request
      method: "POST",
   
      // Add body which contains JSON data
      body: JSON.stringify({
         id: 290,
         title: "Today is the rainy day. I like rain",
      }),
      // Setting headers
      headers:{"Content-type": "application/json; charset=UTF-8"}
   });
   fetch(newRequest)
   // Handling response
   .then(response => response.json())
   .then(myData => {
      console.log("Data Sent Successfully");
   
      // Display output in HTML page
      document.getElementById("sendData").innerHTML = JSON.stringify(myData);
   })
   // Handling error
   .catch(err=>{
      console.error("We get an error:", err);
   });
</script>
<h2>Sent Data</h2>
<div>
   <!-- Displaying data-->
   <p id = "sendData"></p>
</div>
</body>
</html>

输出

结论

这就是我们在 Fetch API 中发送 JSON 数据的方法。它是 Web API 中一种非常流行的数据结构，用于发送或接收数据。与其他数据格式相比，它很轻巧且更加灵活。现在在下一篇文章中，我们将学习如何发送数据对象。