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 对象或值的过程。 JSON 数据的解析可以通过使用response.json() 函数来完成。该函数将响应对象作为参数，并返回一个在解析的 JSON 数据或 JavaScript 对象中解析的 Promise。

语法

response.json()

发送 JSON 数据

Fetch API发送JSON数据使用以下方式 −

使用 fetch() 函数
将 fetch() 函数与 async/await 结合使用
使用请求对象

方法 1 − 使用 fetch() 函数

我们可以使用 fetch() 函数发送数据。在此函数中，我们在 body 参数中创建 JSON 数据，并使用 POST 请求方法在指定 URL 上发送数据。

示例

在下面的程序中，我们将使用 fetch() 函数发送 JSON 数据。 fetch() 函数用于创建请求。该请求包含 POST 方法（告诉我们要发送数据）、包含使用 stringify() 转换为字符串的 JSON 数据的正文以及指定我们要发送 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 结合使用

我们还可以使用带有 async/await 的 fetch() 函数发送 JSON 数据。 Async/await 允许您创建一个异步程序，其行为更像同步程序，从而更容易学习和理解。

示例

在下面的程序中，我们将使用带有 async/await 的 fetch() 函数发送 JSON 数据。为此，我们创建一个异步函数。在该函数中，我们使用 try 块，该块使用 fetch() 函数以及资源 URL、POST 请求方法、标头和正文（字符串格式的 JSON 数据）参数将 JSON 数据发送到给定的 URL。它还使用await关键字和fetch()函数来等待服务器的响应。如果响应成功，那么我们使用 .json() 函数解析服务器返回的响应。如果响应的状态代码包含不成功的代码，则 else 块运行。如果我们在获取操作期间遇到错误，则该错误将由 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 − 使用请求对象

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

示例

在下面的程序中，我们将使用请求对象发送 JSON 数据。因此，使用 Request() 构造函数，我们创建一个请求对象以及诸如资源 URL、POST 请求方法、正文（使用 stringify() 的字符串格式的 JSON 数据）和标头等参数。现在我们在 fetch 函数中传递 newRequest 对象来发送请求并使用 .then() 函数处理响应并使用 .json() 解析响应。如果我们在获取操作期间遇到错误，则该错误将由 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 中用于发送或接收数据的非常流行的数据结构。与其他数据格式相比，它是轻量级的并且更加灵活。在下一篇文章中，我们将学习如何发送数据对象。

AJAX 教程

Fetch API 基础知识

Stream API 基础知识

Fetch API - 发送 JSON 数据

语法

语法

发送 JSON 数据

方法 1 − 使用 fetch() 函数

示例

输出

方法 2 − 将 fetch() 函数与 async/await 结合使用

示例

输出

方法 3 − 使用请求对象

示例

输出

结论

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！