JavaScript Fetch API 中怎么发送带请求体的 POST 请求-js教程-PHP中文网

发送带请求体的POST请求需正确设置method、headers和body三者并保持匹配：JSON数据须设'Content-Type': 'application/json'且body用JSON.stringify()序列化；表单数据用FormData实例，不设Content-Type；纯文本或URL编码数据则对应设text/plain或application/x-www-form-urlencoded，body为字符串。

javascript fetch api 中怎么发送带请求体的 post 请求

发送带请求体的 POST 请求，关键在于正确设置 method、headers 和 body 三个选项，且三者需相互匹配。

确保 Content-Type 与请求体格式一致

浏览器不会自动推断请求体类型，必须显式声明 Content-Type。常见组合有：

JSON 数据：设 headers: { 'Content-Type': 'application/json' }，并用 JSON.stringify() 序列化对象
表单数据（键值对）：用 FormData 实例，无需手动设 Content-Type（浏览器会自动设置为 multipart/form-data 并带上 boundary）
纯文本或 URL 编码数据：对应设 text/plain 或 application/x-www-form-urlencoded，并确保 body 是字符串

发送 JSON 数据的典型写法

这是最常用场景，注意不能直接传对象，必须转成字符串：

fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: 'alice',
    password: '123456'
  })
})
.then(res => res.json())
.then(data => console.log(data));

上传文件或混合数据用 FormData

适合含文件、图片或需兼容传统后端表单解析的场景，FormData 会自动处理编码和分隔符：

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

const formData = new FormData();
formData.append('username', 'alice');
formData.append('avatar', fileInput.files[0]); // 文件输入元素

fetch('/api/upload', {
  method: 'POST',
  body: formData // 不要设 Content-Type，让浏览器自动设置
})
.then(res => res.json());

处理响应时别忘了检查状态码

fetch 只在网络错误时 reject，HTTP 错误状态（如 400、500）仍算成功。建议主动判断：

fetch('/api/submit', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ x: 1 })
})
.then(res => {
  if (!res.ok) {
    throw new Error(`HTTP error! status = ${res.status}`);
  }
  return res.json();
})
.catch(err => console.error('请求失败:', err));

不复杂但容易忽略的是 header 和 body 的配合 —— 类型声明错了，后端很可能收不到数据或解析失败。