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中，我们可以通过指定方法、主体标头等附加参数来使用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 − 它也是一个可选参数。当您想要向请求添加正文时，可以使用此参数。
headers − 它也是一个可选参数。它用于指定标头。

示例

在下面的程序中，我们将向给定的 URL 发送一个 JSON 文档。为此，我们定义了一个 fetch() 函数以及一个 URL、一个 POST 请求、一个正文（即 JSON 文档）和一个标头。因此，当 fetch() 函数执行时，它将给定的正文发送到指定的 URL，并使用 response.json() 函数将响应数据转换为 JSON 格式。之后，我们将显示响应。

<!DOCTYPE html>
<html>
<body>
<script>
   // 使用 POST 请求从 URL 检索数据
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Adding POST request
      method: "POST",
   
      // 添加我们要发送的正文
      body: JSON.stringify({
      id: 32,
      title: "Hello! How are you?",
      }),
      // Adding headers
      headers:{"Content-type": "application/json; charset=UTF-8"}
   })
   // 将接收到的信息转换为 JSON
   .then(response => response.json())
   .then(myData => {
      // 显示检索到的数据
      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>