Fetch API - 傳送POST請求

就像XMLHttpRequest一樣，Fetch API也提供了一個JavaScript介面來非同步管理與Web伺服器之間請求和響應。它提供了一個fetch()方法來非同步獲取資源或向伺服器傳送請求，而無需重新載入網頁。藉助fetch()方法，我們可以執行各種請求，例如POST、GET、PUT和DELETE。因此，在本文中，我們將學習如何使用Fetch API傳送POST請求。

傳送POST請求

Fetch API也支援POST請求。POST請求是一個HTTP請求，用於將資料或表單傳送到給定的資源或Web伺服器。在Fetch API中，我們可以透過指定附加引數（如method、body、headers等）來使用POST請求。

語法

fetch(URL, {
   method: "POST",
   body: {//JSON Data},
   headers:{"content-type": "application/json; charset=UTF-8"}
})
.then(info =>{
   // Code
})
.catch(error =>{
   // catch error
});

這裡的fetch()函式包含以下引數：

URL − 它代表我們想要獲取的資源。
method − 這是一個可選引數。它用於表示請求型別，例如GET、POST、DELETE和PUT。
body − 這是一個可選引數。當您想要向請求新增主體時，可以使用此引數。
header − 這是一個可選引數。它用於指定頭部資訊。

示例

在下面的程式中，我們將向給定的URL傳送一個JSON文件。為此，我們定義了一個fetch()函式，其中包含URL、POST請求、主體（即JSON文件）和頭部資訊。當fetch()函式執行時，它將給定的主體傳送到指定的URL，並使用response.json()函式將響應資料轉換為JSON格式。之後，我們將顯示響應。

<!DOCTYPE html>
<html>
<body>
<script>
   // Retrieving data from the URL using POST request
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Adding POST request
      method: "POST",
   
      // Adding body which we want to send
      body: JSON.stringify({
      id: 32,
      title: "Hello! How are you?",
      }),
      // Adding headers
      headers:{"Content-type": "application/json; charset=UTF-8"}
   })
   // Converting received information into JSON
   .then(response => response.json())
   .then(myData => {
      // Display the retrieve Data
      console.log("Data Sent Successfully");
   
      // Display output
      document.getElementById("manager").innerHTML = myData;
   });
</script>
<h2>Display Data</h2>
<div>
   <!-- Displaying retrevie data-->
   <table id = "manager"></table>
</div>
</body>
</html>

輸出

結論

這就是我們如何使用Fetch API傳送POST請求的方法。使用此請求，我們可以輕鬆地將資料傳送到指定的URL或伺服器。此外，使用fetch()函式，您可以根據需要修改請求。在下一篇文章中，我們將學習如何傳送PUT請求。

列印頁面