js fetch post|极客笔记

js fetch post

介绍

在网络开发中，经常需要与服务器进行数据交互。其中一种常见的情况是向服务器发送POST请求，以向服务器提交表单数据或发送其他需要处理的数据。在JavaScript中，我们可以使用Fetch API来发送POST请求。

Fetch是一种现代的网络请求API，提供了一种简洁和灵活的方式来进行网络请求。它使用Promise对象来处理响应，可以在各种场景下使用，包括向服务器发送POST请求。

本文将详细介绍如何使用Fetch进行POST请求。首先，我们将了解Fetch的基本用法，然后探讨如何使用Fetch发送POST请求，并最后通过示例代码展示如何将其应用到实际项目中。

Fetch基本用法

在使用Fetch进行POST请求之前，我们需要先了解Fetch的基本使用方法。Fetch API提供了一个fetch()方法，它接收一个URL作为参数，并返回一个Promise对象。

下面是使用Fetch发送GET请求的基本示例：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在上面的示例中，我们向https://api.example.com/data发送了一个GET请求。fetch()方法返回一个Promise对象，我们可以使用.then()方法来处理响应并获取返回的数据。

.then()方法接收一个回调函数，该回调函数接收一个response对象作为参数。我们可以通过调用response.json()方法将响应体解析为JSON格式的数据。最后，我们使用.then()方法来处理解析后的数据，在控制台中输出它们。

如果请求发生错误，可以使用.catch()方法捕获错误并进行处理。上面的示例中，我们简单地将错误信息输出到控制台。

需要注意的是，Fetch请求默认不会发送或接收与当前网页的Cookie相关的用户凭据（credentials）。如果要发送Cookie，需要在fetch()方法的第二个参数中设置credentials参数为'include'，如下所示：

fetch('https://api.example.com/data', {
  credentials: 'include'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

现在，我们已经了解了Fetch的基本用法，接下来将介绍如何使用Fetch进行POST请求。

使用Fetch发送POST请求

要使用Fetch发送POST请求，我们需要设置请求的一些选项，如请求方法、请求头、请求主体等。

首先，我们需要设置请求的选项，如下所示：

const requestOptions = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John',
    age: 30
  })
};

在上面的示例中，我们使用method选项设置请求方法为POST，headers选项设置请求头为Content-Type: application/json，body选项设置请求主体为包含name和age字段的JSON字符串。

然后，我们可以使用fetch()方法发送POST请求，如下所示：

fetch('https://api.example.com/data', requestOptions)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在上面的示例中，我们将请求选项作为第二个参数传递给fetch()方法。Fetch将自动使用这些选项发送POST请求。

我们可以使用同样的方式处理响应数据和错误，与之前的示例相同。

需要注意的是，POST请求的请求主体可以是各种类型的数据，例如JSON字符串、FormData对象、URLSearchParams对象等。在上面的示例中，我们将请求主体设置为JSON字符串，因此，需要将数据通过JSON.stringify()方法转换为字符串。

示例代码

下面是一个完整的示例代码，展示了如何使用Fetch进行POST请求，并将其应用到一个实际项目中。假设我们有一个简单的注册表单，我们将使用Fetch将用户输入的数据发送到服务器进行处理，并显示处理结果。

首先，我们创建一个HTML表单，如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>注册表单</title>
</head>
<body>
  <form id="registrationForm">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" required>
    <br>
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required>
    <br>
    <input type="submit" value="注册">
  </form>
  <div id="result"></div>

  <script src="main.js"></script>
</body>
</html>

在上面的示例中，我们通过form元素创建了一个简单的注册表单，并为每个字段添加了必填属性(required)。

然后，我们创建一个JavaScript文件main.js，并在其中编写Fetch请求的代码，如下所示：

document.getElementById('registrationForm').addEventListener('submit', function(event) {
  event.preventDefault();

  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;

  const requestOptions = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      name: name,
      email: email
    })
  };

  fetch('https://api.example.com/register', requestOptions)
    .then(response => response.json())
    .then(data => {
      document.getElementById('result').textContent = data.message;
    })
    .catch(error => {
      console.error(error);
      document.getElementById('result').textContent = '注册失败，请重试。';
    });
});

在上面的示例中，我们通过addEventListener方法为表单的submit事件添加了一个事件监听器。当用户提交表单时，事件监听器将被调用。

在事件监听器中，首先使用event.preventDefault()方法阻止表单默认的提交行为。

然后，我们获取用户在表单中输入的姓名和邮箱，并将它们添加到请求主体中。

接下来，我们使用Fetch发送POST请求，将表单数据发送到https://api.example.com/register。在响应返回后，我们将响应数据解析为JSON格式，并根据返回的结果在页面上显示不同的消息。

如果请求发生错误，我们将错误信息输出到控制台，并在页面上显示一个通用的错误消息。

在实际项目中，我们可以根据不同的情况进行自定义处理，例如根据返回的状态码显示不同的消息，跳转到其他页面等等。