修改 fetch 响应体：创建新 Response 对象的实践指南

本文详细介绍了如何在 javascript 中修改 `fetch` 请求的响应体。由于 `response` 对象是不可变的，直接修改其内容无法生效。核心方法是先获取原始响应体，进行所需修改后，再利用原始响应的状态码、状态文本和头部信息，创建一个全新的 `response` 对象返回。这种方法确保了响应内容的灵活性，同时保留了原始响应的元数据。

在现代 Web 开发中，fetch API 已经成为进行网络请求的标准方式。然而，有时我们可能需要对 fetch 返回的响应（Response 对象）进行修改，例如替换响应体中的特定字符串，或者对 JSON 数据进行转换。初学者常常尝试直接修改 Response 对象中提取出的文本内容，但这种做法并不会更新原始的 Response 对象，因为 Response 对象在创建后是不可变的。要实现响应体的修改，必须创建一个新的 Response 对象。

理解 Response 对象的不可变性

Response 对象，如同许多 Web API 中的对象（例如 Request、Headers），设计为不可变。这意味着一旦一个 Response 对象被创建，它的属性（如 body、status、headers）就不能被直接修改。当你调用 response.text() 或 response.json() 等方法时，这些方法会消耗响应体并返回其内容的一个副本。修改这个副本并不会影响原始的 Response 对象。

// 这种方式无法修改原始的 fetchResponse
const fetchResponse = await fetch(event.request);
let textOfResponse = await fetchResponse.text(); // 消耗响应体，获取副本
textOfResponse = textOfResponse.replace("MARCADOR1", "ON-LINE"); // 修改副本
// 此时 fetchResponse 的 body 仍然是原始内容，因为 textOfResponse 是一个独立的字符串变量。
// return fetchResponse; // 返回的将是未修改的原始响应

创建一个修改后的新 Response 对象

要成功修改 fetch 响应体并将其用于后续处理，正确的做法是创建一个全新的 Response 对象。这个新对象将包含你修改后的响应体，并可以复制原始响应的状态码、状态文本和头部信息，以确保其行为与原始响应保持一致。

以下是实现这一过程的步骤：

图改改

在线修改图片文字

455

查看详情

1. 执行 fetch 请求：获取原始的 Response 对象。
2. 提取原始响应体：根据内容类型，使用 response.text()、response.json()、response.blob() 等方法提取响应体内容。请注意，这些方法会消耗响应体，意味着原始 Response 对象不能再被多次读取其 body。
3. 修改响应体内容：对提取出的内容进行所需的修改。
4. 创建新的 Response 对象：使用修改后的内容作为新 Response 对象的 body，并从原始 Response 对象中复制 status、statusText 和 headers。

示例代码

以下代码演示了如何获取一个 fetch 响应，修改其文本内容，并创建一个新的 Response 对象：

async function modifyFetchResponse(request) {
  // 1. 执行 fetch 请求，获取原始响应
  const originalResponse = await fetch(request);

  // 2. 提取原始响应体（此处以文本为例）
  const originalText = await originalResponse.text();

  // 3. 修改响应体内容
  // 假设我们需要将响应中的所有 "old_value" 替换为 "new_value"
  const modifiedText = originalText.replace(/old_value/g, "new_value");

  // 4. 创建新的 Response 对象
  // 复制原始响应的状态码、状态文本和头部信息
  const newResponse = new Response(modifiedText, {
    status: originalResponse.status,
    statusText: originalResponse.statusText,
    // 将原始 Headers 对象转换为普通对象，以便 new Response() 构造函数接受
    headers: Object.fromEntries(originalResponse.headers.entries()),
  });

  return newResponse;
}

// 示例用法
(async () => {
  // 假设这是一个简单的请求，例如从一个测试 API 获取数据
  const dummyRequest = new Request('https://jsonplaceholder.typicode.com/posts/1');

  // 调用函数来获取并修改响应
  const modifiedRes = await modifyFetchResponse(dummyRequest);

  console.log('Modified Response Status:', modifiedRes.status);
  console.log('Modified Response Headers:', Object.fromEntries(modifiedRes.headers.entries()));
  console.log('Modified Response Body:', await modifiedRes.text());

  // 假设原始响应体是 {"userId": 1, "id": 1, "title": "sunt aut facere old_value", "body": "quia et old_value"}
  // 那么 modifiedRes.text() 应该包含替换后的内容
})();

在上面的示例中，Object.fromEntries(originalResponse.headers.entries()) 是将原始 Headers 对象转换为一个普通 JavaScript 对象的方法，new Response() 构造函数可以接受这样的对象来设置头部信息。

注意事项

• 响应体消耗：一旦调用了 response.text()、response.json() 等方法，原始 Response 对象的响应体就被“消耗”了，不能再被读取。因此，如果你需要多次读取响应体（例如，既要修改文本，又要保留原始 Blob），你需要先将原始响应体克隆或存储起来。
• 不同内容类型：如果响应体是 JSON，你可以使用 response.json() 获取 JavaScript 对象，修改对象后，再使用 JSON.stringify() 转换回字符串作为新 Response 的 body。对于二进制数据（如图片），可以使用 response.blob()，修改后创建新的 Blob 或 File 对象。
• 性能考量：读取整个响应体、进行修改、然后重新创建一个 Response 对象会引入一定的性能开销，尤其是在处理大型响应体时。在性能敏感的应用中，应权衡是否必须进行这种修改。
• 错误处理：在 fetch 请求和响应体解析过程中，都可能发生错误。例如，网络请求失败、JSON 解析失败等。在实际应用中，应添加适当的 try...catch 块来处理这些潜在的错误。

总结

尽管 Response 对象是不可变的，但通过创建一个新的 Response 对象，我们可以灵活地修改 fetch 请求的响应体。关键在于正确地提取、修改原始响应体内容，并确保将原始响应的元数据（如状态码、状态文本和头部）复制到新的 Response 对象中。这种模式是处理和转换 fetch 响应的强大且标准的方法。

以上就是修改 fetch 响应体：创建新 Response 对象的实践指南的详细内容，更多请关注php中文网其它相关文章！