JavaScript 核心：深入理解 Fetch API 中的 Request、Response 与 Body 混入

以下代码展示了在 Request 对象上使用 Body.json()：

let request = new Request("https://foo.com", {
  method: "POST",
  body: JSON.stringify({ bar: "baz" })
});
request.json().then(console.log);
// {bar: 'baz'}

3. 处理表单数据

浏览器可以将 FormData 对象序列化为主体。例如，下面这个 FormData 实例：

let myFormData = new FormData();
myFormData.append("foo", "bar");

在通过 HTTP 传送时，WebKit 浏览器会将其序列化为下列内容：

------WebKitFormBoundarydR9Q2kOzE6nbN7eR
Content-Disposition: form-data; name="foo"
bar
------WebKitFormBoundarydR9Q2kOzE6nbN7eR--

Body.formData() 方法返回一个 Promise，解析后将缓冲区转存得到的 FormData 实例。下面的代码展示了在 Response 对象上使用 Body.formData()：

fetch("https://foo.com/form-data")
  .then((response) => response.formData())
  .then((formData) => console.log(formData.get("foo")));
// bar

以下代码展示了在 Request 对象上使用 Body.formData()：

let myFormData = new FormData();
myFormData.append("foo", "bar");
let request = new Request("https://foo.com", {
  method: "POST",
  body: myFormData
});
request.formData().then((formData) => console.log(formData.get("foo")));
// bar

需要注意的是，一旦 body 被读取（bodyUsed 变为 true），该流即被锁定，无法再次消费。在实际开发中，如果不确定是否需要多次读取数据，建议先检查 bodyUsed 状态或提前缓存数据。