Fetch: POST json数据

在使用Fetch API发送POST请求并附带JSON数据时，你需要遵循以下步骤：

1. 设置请求方法为POST。
2. 指定请求头，告诉服务器你发送的是JSON数据。
3. 将数据转换为JSON字符串。
4. 发送请求。

以下是一个简单的示例代码，展示了如何使用Fetch API发送POST请求并附带JSON数据：

// 要发送的数据
const data = {
  name: 'John Doe',
  age: 30,
  email: 'johndoe@example.com'
};

// 使用Fetch API发送POST请求
fetch('https://example.com/api/users', {
  method: 'POST', // 指定请求方法为POST
  headers: {
    'Content-Type': 'application/json' // 设置请求头，指定内容类型为JSON
  },
  body: JSON.stringify(data) // 将数据对象转换为JSON字符串
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json(); // 解析响应数据为JSON
})
.then(data => {
  console.log('Success:', data); // 处理成功响应
})
.catch(error => {
  console.error('There was a problem with the fetch operation:', error); // 处理错误
});

解释

1. 数据准备： const data = { name: 'John Doe', age: 30, email: 'johndoi@example.com' };
2. Fetch API调用： fetch('https://example.com/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) })
   • https://example.com/api/users 是目标URL。
   • method: 'POST' 指定请求方法为POST。
   • headers 对象设置请求头，Content-Type: 'application/json' 告诉服务器发送的数据是JSON格式。
   • body: JSON.stringify(data) 将JavaScript对象转换为JSON字符串。
3. 处理响应： .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => { console.log('Success:', data); }) .catch(error => { console.error('There was a problem with the fetch operation:', error); });
   • 第一个 .then 处理响应，检查响应是否成功，并解析JSON数据。
   • 第二个 .then 处理解析后的数据。
   • .catch 捕获并处理任何错误。

通过这种方式，你可以使用Fetch API轻松地发送POST请求并附带JSON数据。