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>

输出

JSON 数据

方法 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>

输出

JSON 数据

方法 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>

输出

JSON 数据

结论

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

打印本页
上一页
下一页