Ajax 简明教程

Fetch API - Send JSON Data

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 数据执行两个主要操作 −

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

Syntax

JSON.stringify()

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

Syntax

response.json()

Send JSON Data

要发送 JSON 数据，Fetch API 使用以下方法 −

Using fetch() function
使用带有 async/await 的 fetch() 函数
Using request object

Method 1 − Using the fetch() function

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

Example

在以下程序中，我们将使用 fetch() 函数发送 JSON 数据。fetch() 函数用于创建请求。请求包含 POST 方法，它告诉我们我们想要发送数据，一个正文，其中包含使用 stringify() 转换为字符串的 JSON 数据，和一个标头，它指定我们正在发送 JSON 数据。在发送请求后，服务器返回一个将解析为响应对象的 promise，并使用 .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>

Output

Method 2 − Using fetch() function with async/await

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

Example

在以下程序中，我们将使用带有 async/await 的 fetch() 函数发送 JSON 数据。因此，为此，我们创建了一个 async 函数。在函数中，我们使用 try 块，该块使用 fetch() 函数以及资源 URL、POST 请求方法、标头和 body（字符串格式的 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>

Output

Method 3 − Using request object

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

Example

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

Output

Conclusion

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