Fetch request.bodyUsed 属性

request.bodyUsed 是 Fetch API 中的一个属性，用于检查请求体是否已经被读取过。一旦请求体被读取，bodyUsed 属性会变为 true，之后再次尝试读取请求体将会失败。这个特性对于确保请求体只能被使用一次非常有用。

请求体的使用场景

在处理 HTTP 请求时，请求体通常包含需要发送到服务器的数据。例如，在 POST 请求中，请求体可能包含表单数据、JSON 数据等。由于网络传输和性能原因，HTTP 协议规定请求体只能被读取一次。request.bodyUsed 属性就是为了帮助开发者确保这一点而设计的。

如何检查 request.bodyUsed 属性

你可以通过访问 Request 对象的 bodyUsed 属性来检查请求体是否已经被读取：

// javascriptcn.com 代码示例
const request = new Request('https://example.com/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
});

console.log(request.bodyUsed); // 输出 false

在这个例子中，我们创建了一个新的 Request 对象，并指定了请求方法、头部信息以及请求体。初始时，bodyUsed 的值为 false，表示请求体尚未被读取。

如何读取请求体

要读取请求体的内容，可以使用 Request 对象提供的 body 属性。需要注意的是，一旦请求体被读取，bodyUsed 属性就会变为 true。因此，通常情况下，你只会读取一次请求体。以下是读取请求体的方法：

使用 text() 方法

request.text().then(body => {
  console.log(body); // 输出请求体中的文本内容
  console.log(request.bodyUsed); // 输出 true
});

使用 json() 方法

如果请求体包含 JSON 数据，你可以使用 json() 方法来解析它：

request.json().then(body => {
  console.log(body); // 输出请求体中的 JSON 对象
  console.log(request.bodyUsed); // 输出 true
});

使用 formData() 方法

如果请求体是表单数据格式，你可以使用 formData() 方法来解析它：

request.formData().then(formData => {
  console.log(formData); // 输出请求体中的 formData 对象
  console.log(request.bodyUsed); // 输出 true
});

如何避免重复读取请求体

为了避免因多次读取请求体而导致的问题，你应该只在必要时读取请求体。例如，在中间件或代理服务器中处理请求时，确保每次请求只读取一次请求体。以下是一个示例，展示如何在中间件中处理请求体：

app.use(async (req, res, next) => {
  if (!req.bodyUsed) {
    await req.text();
    req.bodyUsed = true;
  }
  // 继续处理请求
  next();
});

在这个例子中，我们使用了一个中间件函数来检查请求体是否已经被读取。如果没有被读取，则读取请求体并将其标记为已读取。这样可以确保请求体只被读取一次。

使用 clone() 方法复制请求对象

如果你需要在不同的地方多次使用同一个请求体，可以使用 Request 对象的 clone() 方法来复制请求对象。这样，每个请求对象都有自己的请求体副本，可以独立地进行读取操作：

// javascriptcn.com 代码示例
const originalRequest = new Request('https://example.com/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
});

const clonedRequest = originalRequest.clone();

originalRequest.text().then(body => {
  console.log(body); // 输出请求体中的文本内容
  console.log(originalRequest.bodyUsed); // 输出 true
});

clonedRequest.text().then(body => {
  console.log(body); // 输出请求体中的文本内容
  console.log(clonedRequest.bodyUsed); // 输出 true
});

在这个例子中，我们首先创建了一个原始请求对象 originalRequest。然后，我们使用 clone() 方法创建了该请求对象的一个副本 clonedRequest。尽管这两个请求对象共享相同的请求体，但它们各自的 bodyUsed 属性都是独立的。这意味着你可以在不干扰另一个请求的情况下多次读取请求体。

总结

request.bodyUsed 属性在 Fetch API 中提供了重要的功能，确保请求体只能被读取一次。这有助于防止意外的数据丢失或重复处理问题。通过合理使用 bodyUsed 属性和 clone() 方法，你可以更有效地管理和处理 HTTP 请求中的数据。