Fetch API - 发送JSON数据

上一页
下一页

Fetch API 用于异步发送或接收数据，无需刷新网页。在 Fetch API 中，我们可以发送各种格式的数据，例如 JSON、URL 编码表单、文本、FormData、Blob 或 ArrayBuffer。在所有这些格式中，JSON（JavaScript 对象表示法）数据是最常用的发送数据的格式，因为它简单、轻量级且与大多数编程语言兼容。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() 函数

  • 使用带有 async/await 的 fetch() 函数

  • 使用请求对象

方法 1 - 使用 fetch() 函数

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

示例

在下面的程序中，我们将使用 fetch() 函数发送 JSON 数据。fetch() 函数用于创建请求。请求包含 POST 方法，告诉我们我们要发送数据，一个包含 JSON 数据的 body（使用 stringify() 转换为字符串），以及指定我们正在发送 JSON 数据的 header。发送请求后，服务器返回一个 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>

输出

JSON Data

方法 2 - 使用带有 async/await 的 fetch() 函数

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

示例

在下面的程序中，我们将使用带有 async/await 的 fetch() 函数发送 JSON 数据。为此，我们创建一个异步函数。在函数中，我们使用 try 块，该块使用 fetch() 函数以及资源 URL、POST 请求方法、header 和 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>

输出

JSON Data

方法 3 - 使用请求对象

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

示例

在下面的程序中，我们将使用请求对象发送 JSON 数据。因此，使用 Request() 构造函数，我们创建一个请求对象以及参数，如资源 URL、POST 请求方法、body（使用 stringify() 的字符串格式的 JSON 数据）和 header。现在，我们将 newRequest 对象传递给 fetch 函数以发送请求，并使用 .then() 函数处理响应，并使用 .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>

输出

JSON Data

结论

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

打印页面
上一页
下一页
广告