如何在 JavaScript 中为 API 调用发出 POST 请求

在使用 JavaScript 进行 API 的调用时，会涉及到使用 HTTP 请求发送数据到服务器的需求。其中，POST 请求是一种向服务器发送数据的常见方式。本文将介绍如何使用 JavaScript 发送 POST 请求。

XMLHttpRequest

在浏览器中，我们可以使用 XMLHttpRequest（XHR）对象向服务器发出 HTTP 请求。这是一个由 W3C 定义的 API，可用于在不重新加载页面的情况下更新网页。XHR 可以用于获取任何类型的数据，而不仅仅是 XML。

以下是一个发送 POST 请求的示例，使用了 XMLHttpRequest：

let xhr = new XMLHttpRequest();
let url = "https://example.com/api";
let data = JSON.stringify({
  name: "John Doe",
  email: "johndoe@example.com"
});

xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/json");

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

xhr.send(data);

首先，我们创建了一个 XMLHttpRequest 对象，并指定了请求的 URL。然后，我们使用 JSON.stringify() 将数据转换为 JSON 格式，并设置了请求的类型为 POST。

注意，setRequestHeader() 方法必须在 open() 方法之后，send() 方法之前使用。

最后，我们指定了一个回调函数，用于处理服务器返回的数据。readyState 属性表示请求的状态，值为 4 表示完成。status 属性表示服务器返回的 HTTP 状态码，值为 200 表示成功。

fetch API

除了 XMLHttpRequest，还可以使用 fetch API 来发送 HTTP 请求。fetch 是一种比较新的 API，可用于获取资源和发送数据。

以下是一个发送 POST 请求的示例，使用了 fetch API：

let url = "https://example.com/api";
let data = JSON.stringify({
  name: "John Doe",
  email: "johndoe@example.com"
});

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

这里使用 fetch() 方法发送 POST 请求，并设置了请求的类型为 JSON。在设置请求头时，我们使用了 Content-Type: application/json。最后，我们将请求的结果转换为 JSON 格式并处理。

需要注意的是，fetch API 不支持在 IE 中使用。如果需要在 IE 中发送 POST 请求，可以使用 XMLHttpRequest 或使用类似 axios 的第三方库。

结论

以上是使用 JavaScript 发送 POST 请求的两个示例。通常情况下，我们建议使用 fetch API，因为它提供了更简洁的语法和更好的可读性。但在老版本的浏览器中，可能需要使用 XMLHttpRequest 来进行请求。

同时，我们需要注意设置请求的头部和格式，以确保数据能够被服务器正确处理和存储。