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

使用 fetch 发送 post 请求需正确设置 method、headers 和 body：json 数据用 json.stringify() 并设 content-type: application/json；表单数据用 formdata（不设 headers）；url 编码用 urlsearchparams 并设 application/x-www-form-urlencoded。

javascript fetch 怎么发送带请求体的 post 异步数据

用 fetch 发送带请求体的 POST 请求，关键在于正确设置 method、headers 和 body。默认情况下 fetch 的 GET 请求没有 body，而 POST 必须显式传入 body，且内容类型要和实际数据格式一致。

发送 JSON 数据

最常见的是提交 JSON 格式数据。需将 JavaScript 对象用 JSON.stringify() 转为字符串，并设置 Content-Type: application/json：

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

发送表单数据（FormData）

上传文件或普通表单字段时，推荐用 FormData。它会自动设置合适的 Content-Type（含 boundary），无需手动指定：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

创建 new FormData() 实例
用 .append(key, value) 添加字段（支持文件）
直接传入 body，fetch 会处理编码

const formData = new FormData();
formData.append('username', 'admin');
formData.append('avatar', fileInput.files[0]);

fetch('/api/upload', {
  method: 'POST',
  body: formData // 不要设 headers 中的 Content-Type！
})
.then(res => res.json());

发送 URL 编码的键值对

类似传统表单提交（application/x-www-form-urlencoded），需手动将对象转为 key=val&key2=val2 格式：

可用 URLSearchParams 构造（推荐，原生支持）
记得设置 Content-Type 头

const params = new URLSearchParams();
params.append('username', 'admin');
params.append('remember', 'true');

fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: params.toString()
});

注意点和常见错误

容易出错的地方：

忘记写 method: 'POST' —— fetch 默认是 GET，即使有 body 也不会发出去
JSON 数据没 stringify —— 直接传对象会报错或被转成 [object Object]
FormData 错误设置了 headers —— 浏览器自动生成的 Content-Type 含 boundary，手动覆盖会导致后端解析失败
没处理响应状态 —— fetch 只在网络失败时 reject，HTTP 错误码（如 400、500）仍进 then，建议检查 res.ok

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南