Fetch API - 請求體資料

Fetch API 是一種現代技術，用於非同步傳送或接收資料，而無需重新整理網頁。它提供了一個在 Web 瀏覽器中建立 HTTP 請求的介面。幾乎所有現代 Web 瀏覽器都支援它。我們也可以說，透過使用 Fetch API，我們可以從 Web 伺服器獲取 JSON 資料、HTML 頁面等資源，並且可以使用不同的 HTTP 請求（如 PUT、POST 等）將資料傳送到伺服器。因此，在本文中，我們將學習什麼是請求體資料，以及我們將如何使用請求體資料。

請求體資料

在 Fetch API 中，請求和響應都包含請求體資料。請求中的請求體資料是一個例項，包含我們想要傳送到伺服器的資料，而響應中的請求體資料是一個例項，包含使用者請求的資料。它通常由 PUT 或 POST 請求用於將資料傳送到伺服器。它可以是 ArrayBuffer、TypedArray、DataView、Blob、File、String、URLSearchParams 或 FormData 的例項。在傳送請求體資料時，您還需要在請求中設定一個頭部資訊，以便伺服器知道資料的型別。

Request 和 Response 介面提供了多種提取請求體的方法，它們是：

Request.arrayBuffer() - 此方法用於解析一個 Promise，該 Promise 包含請求體的 ArrayBuffer 表示形式。
Request.blob() - 此方法用於解析一個 Promise，該 Promise 包含請求體的 Blob 表示形式。
Request.formData() - 此方法用於解析一個 Promise，該 Promise 包含請求體的 FormData 表示形式。
Request.json() - 此方法用於將請求體解析為 JSON，並解析一個 Promise，該 Promise 包含解析結果。
Request.text() - 此方法用於解析一個 Promise，該 Promise 包含請求體的文字表示形式。
Response.arrayBuffer() - 此方法用於返回一個 Promise，該 Promise 將解析包含響應體的 ArrayBuffer 表示形式。
Response.blob() - 此方法用於返回一個 Promise，該 Promise 將解析包含響應體的 Blob 表示形式。
Response.formData() - 此方法用於返回一個 Promise，該 Promise 將解析包含響應體的 FormData 表示形式。
Response.json() - 此方法用於將響應體解析為 JSON，並返回一個 Promise，該 Promise 將解析包含解析結果。
Response.text() - 此方法用於返回一個 Promise，該 Promise 將解析包含響應體的文字表示形式。

所有這些方法都返回一個 Promise，該 Promise 將解析包含請求體的實際內容。

請求體資料通常與 fetch() 函式一起使用。這裡它是可選的，只有當您想要將資料傳送到伺服器時，才能使用 body 引數。

語法

fetch(resourceURL,{
   Method: 'POST',
   body:{
      Name: "Monika",
      Age: 34,
      City: "Pune"
   },
   headers: {'content-Type':'application/json'}
})

fetch() 函式的引數：

resourceURL - 它表示我們要獲取的資源。它可以是字串、請求物件或資源的 URL。
method - 它表示請求方法，例如 GET、POST、PUT 和 DELETE。
headers - 用於向請求新增頭部資訊。
body - 用於向請求新增資料。GET 或 HEAD 方法不使用它。

在下面的程式中，我們使用 POST 方法傳送請求體資料。因此，我們建立了一個 HTML 程式碼，其中我們使用 JavaScript 指令碼將資料傳送到伺服器。在指令碼中，我們定義了一個 fetch() 函式，該函式使用 POST 請求方法將 body 引數中存在的資料傳送到給定的 URL。這裡的頭部資訊設定為“application/json”，表示我們正在傳送資料。在將請求傳送到伺服器之前，我們使用 JSON.stringify() 函式將資料轉換為 JSON 字串。在從伺服器收到響應後，我們檢查響應是否正常。如果是，則我們使用 response.json() 函式將響應體解析為 JSON，然後在輸出螢幕上顯示結果。如果我們遇到任何錯誤，則 catch() 塊將處理該錯誤。

示例

<!DOCTYPE html>
<html>
<body>
<script>
   // Retrieving data from the URL using the POST request
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Adding POST request
      method: "POST",
   
      // Adding body which we want to send
      body: JSON.stringify({
         id: 45,
         title: "Tom like finger chips",
         age: 34
      }),
      // Adding header
      headers:{"Content-type": "application/json; charset=UTF-8"}
   })
   // Converting received information into JSON
   .then(response =>{
      if (response.ok){
         return response.json()
      }
   })
   .then(myData => {
      // Display the retrieve Data
      console.log("Data Sent Successfully");
   
      // Display output
      document.getElementById("sendData").innerHTML = JSON.stringify(myData);
   }).catch(err=>{
      console.log("Found error:", err)
   });
</script>
   <h2>Sent Data</h2>
   <div>
      <!-- Displaying retrevie data-->
      <p id = "sendData"></p>
   </div>
</body>
</html>

輸出

結論

因此，這就是我們如何在 Fetch API 中使用請求體資料的方法。使用請求體資料，我們可以將資料從 Web 瀏覽器傳送到 Web 伺服器，反之亦然。在請求體中，請求體資料僅與 PUT 和 POST 請求方法一起使用，因為使用此請求我們可以將資料傳送到伺服器。它不與 GET 請求一起使用，因為 GET 請求用於從伺服器獲取資料。現在在下一篇文章中，我們將學習 Fetch API 中的憑證。

列印頁面