JavaScript Fetch API Post

在这篇文章中，我们将探讨如何使用 JavaScript Fetch API 进行 POST 请求。Fetch API 是浏览器内置的 API，可用于在 Web 应用程序中进行网络请求。

准备工作

在进行 POST 请求前，需要准备以下内容：

• 一个目标 URL，即请求的地址。
• 要发送的数据，可以是文本、JSON 等格式。
• 请求头，可选项。

发送 POST 请求

使用 Fetch API 发送 POST 请求的代码示例如下：

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})

代码解释：

• url：请求的地址。
• method：请求方法，这里设置为 POST。
• headers：请求头，这里设置为 Content-Type: application/json。
• body：要发送的数据，使用 JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串格式。

示例代码

以下是一个完整的示例代码，演示如何发送 JSON 格式的数据到服务器。

const url = 'https://example.com/api';
const data = { username: 'john.doe', password: 'my_secret_password' };

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

代码解释：

• url：请求的地址。
• data：要发送的数据，这里使用 JavaScript 对象格式。
• method：请求方法，这里设置为 POST。
• headers：请求头，这里设置为 Content-Type: application/json。
• body：使用 JSON.stringify() 方法将 JavaScript 对象格式的数据转换为 JSON 字符串格式。
• response.json()：使用 json() 方法将响应转换为 JSON 格式。
• then()：获取响应数据并将其打印到控制台。
• catch()：处理错误。

总结

使用 JavaScript Fetch API 发送 POST 请求是一种简洁的方式，可以轻松地发送数据到服务器。需要注意的是，必须设置请求头的 Content-Type 为 application/json，才能正确地将数据解析为 JSON 格式。