就像 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 =>{
// 代码
})
.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>
// 使用POST请求从URL检索数据
fetch("https://jsonplaceholder.typicode.com/todos", {
// 添加POST请求
method: "POST",
// 添加我们要发送的正文
body: JSON.stringify({
id: 32,
title: "Hello! How are you?",
}),
// 添加标题
headers:{"Content-type": "application/json; charset=UTF-8"}
})
// 将接收到的信息转换为JSON
.then(response => response.json())
.then(myData => {
// 显示检索数据
console.log("数据发送成功");
// 显示输出
document.getElementById("manager").innerHTML = myData;
});
</script>
<h2>显示数据</h2>
<div>
<!-- 显示重试数据 -->
<table id = "manager"></table>
</div>
</body>
</html>
输出
结论
这就是我们使用 Fetch API 发送 POST 请求的方法。使用此请求，我们可以轻松地将数据发送到指定的 URL 或服务器。此外，使用 fetch（） 函数，您可以根据您的要求修改您的请求。现在，在下一篇文章中，我们将学习如何发送 PUT 请求。
