如何使用 fetch 发布数据

在开发Web应用程序时，经常需要将数据发布到Web服务器端。最常见的方法是使用HTTP协议中的POST方法。而现代浏览器提供了一种更为现代的方法：使用JavaScript中的fetch API。

发送POST请求

我们可以使用fetch API来发送一个POST请求。首先，我们需要使用new URLSearchParams()创建一个新的URL参数对象，将所有参数添加到它中并使用fetch API发送POST请求。

const data = new URLSearchParams();
data.append('name', 'John Doe');
data.append('email', 'johndoe@example.com');

fetch('/path/to/post-endpoint', {
  method: 'POST',
  body: data
}).then(response => {
  console.log('Response:', response);
  // Handle response here
}).catch(error => {
  console.error('Error:', error);
  // Handle error here
});

在上面的代码中，我们使用fetch()函数发送POST请求并传递一个表示请求参数的对象。该对象包含以下两个属性：

• method: 设置请求的HTTP方法为POST。
• body: 包含发送到服务器端的参数。我们将参数对象构建为URLSearchParams类（这对表单数据特别有用），并添加到body属性中。

我们接下来处理返回的响应和任何错误。

发送JSON数据

如果我们需要向服务器发送JSON数据，就需要使用JSON.stringify将数据转换为JSON字符串。

const data = {
  name: 'John Doe',
  email: 'johndoe@example.com'
};

fetch('/path/to/post-endpoint', {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type': 'application/json'
  }
}).then(response => {
  console.log('Response:', response);
  // Handle response here
}).catch(error => {
  console.error('Error:', error);
  // Handle error here
});

以上代码中的headers属性指定了HTTP头信息。我们将此设置为Content-Type: application/json以指示服务器端提交的数据是JSON。

结论

使用fetch API可以轻松地将数据发布到Web服务器。我们可以使用URLSearchParams来创建一个表单数据对象，JSON.stringify()将数据转换为JSON字符串，并使用fetch()函数发送POST请求。