本文详细介绍了在javascript中使用fetch api时，如何修改已获取响应的响应体内容，并将其封装成一个新的response对象返回。由于fetch响应的不可变性，直接修改其body是不可能的。教程将指导读者如何提取原始响应内容、进行修改，并结合原始响应的状态码、状态文本及头部信息，构建一个功能完整且内容更新的response实例。
在使用javaScript的Fetch API进行网络请求时，我们经常需要获取响应数据并对其进行处理。然而，在某些场景下，我们可能需要在将响应转发给其他处理函数之前，对响应的实际内容（即响应体）进行修改。一个常见的误区是尝试直接修改已获取的Response对象的属性，例如通过response.text()获取文本后进行修改。这种方法是无效的，因为Response对象及其内部的流式数据是不可变的。一旦响应体被读取，它就不能再次被读取，也不能被直接修改。
要实现对Fetch响应体的修改，正确的做法是：读取原始响应体的内容，进行所需的修改，然后使用修改后的内容以及原始响应的元数据（状态码、状态文本和头部信息）来创建一个全新的Response对象。
修改Fetch响应体的步骤
以下是修改Fetch响应体并生成新响应的详细步骤：
-
发起Fetch请求并获取原始响应： 首先，使用fetch()函数发起请求，并等待获取到原始的Response对象。
const originalResponse = await fetch(event.request);
-
提取原始响应体内容： 根据响应体的预期类型（文本、jsON、Blob等），使用相应的方法（如response.text()、response.json()、response.blob()）来提取其内容。请注意，这些方法会消耗响应体，意味着原始Response对象不能再被用于读取其内容。
const originalText = await originalResponse.text();
-
对内容进行修改： 在这一步，您可以根据业务逻辑对提取出的内容进行任何必要的修改。例如，替换字符串、解析json后修改数据结构等。
// 假设我们需要将响应中的某个占位符替换为实际值 const modifiedText = originalText.replace("MARcadOR1", "ON-LINE"); -
构建新的Response对象： 使用修改后的内容作为新响应的主体，并从原始响应中复制状态码、状态文本和所有头部信息，来创建一个新的Response对象。
const newResponse = new Response(modifiedText, { status: originalResponse.status, statusText: originalResponse.statusText, headers: Object.fromEntries(originalResponse.headers.entries()) });这里需要注意的是，Response构造函数的headers选项需要一个Headers对象或一个包含键值对的对象。originalResponse.headers是一个Headers对象，但直接传递它可能会导致一些内部问题（例如，如果原始Headers对象被消耗）。最稳妥的方式是使用Object.fromEntries(originalResponse.headers.entries())将其转换为一个普通对象，然后再由Response构造函数重新创建Headers对象。
立即学习“Java免费学习笔记（深入）”；
示例代码
以下是一个完整的示例，演示如何获取一个响应，修改其文本内容，并返回一个新的Response对象：
(async () => { // 模拟一个Fetch请求，获取JSON数据 const originalResponse = await fetch('https://jsonplaceholder.typicode.com/posts'); // 1. 提取原始响应体内容（此处为文本） const originalText = await originalResponse.text(); // 2. 对内容进行修改 // 假设我们想将所有帖子的body内容拼接成一个字符串 const posts = JSON.parse(originalText); const transformedContent = posts.map(post => post.body).join('n---n'); // 使用换行和分隔符连接 // 3. 构建新的Response对象 const transformedResponse = new Response(transformedContent, { status: originalResponse.status, statusText: originalResponse.statusText, // 复制所有原始头部信息 headers: Object.fromEntries(originalResponse.headers.entries()) }); // 验证新响应的内容 console.log("--- 原始响应状态 ---"); console.log(`Status: ${originalResponse.status}, StatusText: ${originalResponse.statusText}`); console.log(`Headers: ${JSON.stringify(Object.fromEntries(originalResponse.headers.entries()), null, 2)}`); console.log("n--- 修改后的响应体（部分）---"); const newResponseBody = await transformedResponse.text(); console.log(newResponseBody.substring(0, 500) + '...'); // 打印前500字符 console.log("n--- 新响应状态 ---"); console.log(`Status: ${transformedResponse.status}, StatusText: ${transformedResponse.statusText}`); console.log(`Headers: ${JSON.stringify(Object.fromEntries(transformedResponse.headers.entries()), null, 2)}`); })();
注意事项
- 响应体的消耗： 一旦调用了response.text()、response.json()等方法，原始Response对象的响应体就被消耗了，不能再次读取。如果需要多次读取，可以先使用response.clone()方法创建一个副本。
- 内存与性能： 读取整个响应体到内存中进行修改，然后再创建一个新的Response对象，这会涉及到额外的内存分配和处理时间。对于非常大的响应体，需要考虑其对性能的影响。
- 不同内容类型： 上述示例主要针对文本内容。如果响应体是JSON，您需要先用response.json()解析，修改javascript对象，然后再用JSON.stringify()将其转换回字符串作为新响应的主体。对于二进制数据（如图片、文件），则需要使用response.blob()或response.arrayBuffer()。
- 错误处理： 在实际应用中，应包含适当的错误处理机制，例如在fetch请求失败时捕获错误，或在解析响应体时处理可能的格式错误。
总结
尽管Response对象是不可变的，但通过“读取-修改-新建”的策略，我们仍然可以灵活地对Fetch响应体进行修改。关键在于理解Response对象的不可变性，并利用其构造函数来创建一个包含更新内容但保留原始元数据的新响应。掌握这一技巧，将使您在处理Fetch响应时拥有更大的灵活性。