带有正文和标头的 POST 请求,异步等待 - Javascript

在前端开发中，我们经常需要向后端服务器发送 POST 请求，以便获取数据或执行某些操作。而在发送这些请求时，我们通常需要带上一些请求头和请求正文。本文将介绍如何使用 JavaScript 发送带有标头和请求正文的 POST 请求，并使用异步等待来处理响应。

发送 POST 请求

要发送 POST 请求，我们可以使用 XMLHttpRequest 对象。XMLHttpRequest 对象是一种可以用来向服务器发送 HTTP 请求和接收响应的 API。下面是一个基本的 POST 请求示例：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/endpoint');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ foo: 'bar' }));

在上面的例子中，我们创建了一个新的 XMLHttpRequest 对象，并使用 open() 方法指定请求方法（POST）和要发送请求的 URL（'/api/endpoint'）。然后，我们使用 setRequestHeader() 方法将请求头设置为 Content-Type: application/json，这告诉服务器请求正文是 JSON 格式。最后，我们使用 send() 方法发送请求正文，它是使用 JSON.stringify() 方法将一个包含 foo: "bar" 属性的对象转换为 JSON 字符串。

处理 POST 请求响应

由于发送 POST 请求是一个异步（非阻塞）操作，我们需要在请求发送后等待响应。一种常见的方法是使用回调函数，如下所示：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/endpoint');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.addEventListener('load', function () {
  if (xhr.status === 200) {
    console.log(xhr.response);
  } else {
    console.error(xhr.statusText);
  }
});
xhr.send(JSON.stringify({ foo: 'bar' }));

在上面的例子中，我们使用 addEventListener() 方法添加一个响应加载完成时执行的回调函数。回调函数检查 XMLHttpRequest 对象的 status 属性是否为 200，以确定请求是否成功。如果成功，则打印响应正文（在本例中为 JSON 格式）。否则，我们将打印一个错误消息。

使用异步等待

在某些情况下，我们可能需要使用异步等待，并在 POST 请求完成后继续执行其他操作。实现这一点的一种方法是使用 Promise 对象和 fetch() 方法，如下所示：

fetch('/api/endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ foo: 'bar' }),
})
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
    // Continue with other operations...
  })
  .catch((error) => {
    console.error(error);
  });

在这个例子中，我们使用 fetch() 方法发送 POST 请求，并使用 then() 方法处理响应。then() 方法接受一个回调函数，该函数接收响应对象并返回一个 JSON 解析后的对象。在此之后，我们可以继续执行其他操作。如果请求失败，则使用 catch() 方法处理错误。

总结

在本文中，我们介绍了如何使用 JavaScript 发送带有标头和请求正文的 POST 请求，并使用异步等待来处理响应。我们还讨论了使用 XMLHttpRequest 对象和 fetch() 方法实现这一点的两种不同方法。在编写前端应用程序时，这些技术都是非常有用的。