JavaScript 中 Fetch 怎么配置请求体与发送数据-js教程-PHP中文网

fetch 发送数据需按接口要求配置 body 和 content-type：json 数据用 json.stringify() 并设 application/json；表单数据用 urlsearchparams 并设 application/x-www-form-urlencoded；文件上传用 formdata 且不手动设 content-type；get 请求禁用 body；其他类型需显式设置对应 content-type。

javascript 中 fetch 怎么配置请求体与发送数据

Fetch 发送数据时，请求体（body）的配置取决于接口要求的格式，核心在于设置正确的 Content-Type 请求头，并把数据转成对应格式（如 JSON 字符串、URL 编码字符串或 FormData 对象）。

发送 JSON 数据

大多数 REST API 接收 JSON，需将对象用 JSON.stringify() 转为字符串，并显式设置 Content-Type: application/json：

fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: 'admin',
    password: '123456'
  })
})

注意：不设 headers 或漏写 Content-Type，后端可能无法正确解析；JSON.stringify() 不可省略，直接传对象会报错。

发送表单数据（application/x-www-form-urlencoded）

兼容传统表单提交，需将键值对拼成 key=value&key2=value2 格式。可用 URLSearchParams 自动处理编码：

支持中文、空格等特殊字符自动转义
无需手动拼接字符串或调用 encodeURIComponent
浏览器兼容性良好（Chrome 49+，Firefox 44+）

示例：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: new URLSearchParams({
    username: 'admin',
    password: '123456'
  })
})

上传文件或混合数据（multipart/form-data）

涉及文件上传或同时传文本+文件时，必须用 FormData。它会自动生成边界（boundary），并设置正确的 Content-Type，因此不能手动设置 headers 中的 Content-Type（否则会出错）：

创建 FormData 实例，用 .append() 添加字段
文件字段可传 File 或 Blob 对象
Fetch 会自动补全 multipart 头部

示例：

const formData = new FormData();
formData.append('username', 'admin');
formData.append('avatar', fileInput.files[0]); // fileInput 是 <input type="file">

fetch('/api/upload', {
  method: 'POST',
  body: formData // 不要加 headers.Content-Type
});