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 中非常流行的資料結構，用於傳送或接收資料。與其他資料格式相比，它更輕量級且更靈活。在下一篇文章中，我們將學習如何傳送資料物件。

列印頁面
上一頁
下一頁
廣告