本文旨在指导开发者如何正确修改fetch api返回的响应体内容。由于fetch response对象是不可变的，直接修改其内部数据是无效的。正确的做法是，首先从原始响应中提取并修改其主体内容，然后利用修改后的内容以及原始响应的元数据（如状态码和头部信息）构造一个新的response对象。
在Web开发中，我们经常需要使用Fetch API来获取资源。有时，在将Fetch的响应转发给其他函数或进一步处理之前，我们可能需要修改响应体（例如，替换其中的特定字符串、转换数据格式等）。然而，Response对象在JavaScript中是不可变的（immutable），这意味着一旦创建，其内部状态就不能被直接修改。
为什么直接修改响应体无效？
当我们通过fetchResponse.text()、fetchResponse.json()或fetchResponse.blob()等方法获取响应体时，实际上是消费了响应流。这些方法会返回一个Promise，解析后得到的是响应体内容的副本，而不是对原始Response对象内部流的引用。因此，即使我们修改了text_of_response这样的变量，原始的fetchResponse对象及其内部的响应流仍然保持不变。
考虑以下示例，它展示了这种误解：
async function processResponse(event) {
const fetchResponse = await fetch(event.request); // 获取原始响应
// 尝试修改响应体副本，但这不会影响原始fetchResponse
let text_of_response = await fetchResponse.text(); // 此时原始响应体已被消费
text_of_response = text_of_response.replace("MARCADOR1", "ON-LINE");
// 返回的仍然是原始的、未修改的fetchResponse
return fetchResponse;
}上述代码中，fetchResponse.text()已经将响应体读取并消耗。text_of_response变量只是一个字符串副本。对这个字符串的修改，并不会反映到原始的fetchResponse对象上。当fetchResponse被返回时，它的响应体仍然是最初始的状态。
立即学习“Java免费学习笔记（深入）”；
正确的修改方法：创建新的Response对象
由于Response对象是不可变的，解决此问题的正确方法是：在修改响应体内容后，创建一个新的Response对象。这个新的Response对象将包含我们修改后的内容，并且可以从原始Response对象中复制必要的状态码、状态文本和头部信息。
以下是实现这一过程的详细步骤和示例代码：
1. 发起请求并获取原始响应
首先，像往常一样使用fetch发起请求，并等待获取原始的Response对象。
const originalResponse = await fetch('https://jsonplaceholder.typicode.com/posts');2. 提取并修改响应体内容
根据响应体的类型，使用相应的Response方法（如text()、json()、blob()）来提取内容。提取后，你可以对这些内容进行任何必要的修改。
// 假设响应体是JSON格式，我们想修改其中的某些数据
const originalText = await originalResponse.text();
let modifiedContent;
try {
const posts = JSON.parse(originalText);
// 示例：将所有帖子的body内容连接起来
modifiedContent = posts.map(post => post.body).join(' ');
// 或者更复杂的修改，例如替换特定字段的值
// modifiedContent = JSON.stringify(posts.map(post => ({ ...post, title: post.title.toUpperCase() })));
} catch (e) {
console.error("Failed to parse JSON, treating as plain text.", e);
// 如果不是JSON，则按纯文本处理
modifiedContent = originalText.replace("MARCADOR1", "ON-LINE");
}3. 构建新的响应对象
使用修改后的内容作为新的响应体，并从原始Response对象复制状态码、状态文本和头部信息，构造一个new Response()。
const newResponse = new Response(modifiedContent, {
status: originalResponse.status,
statusText: originalResponse.statusText,
// 复制所有原始头部信息
headers: Object.fromEntries(originalResponse.headers.entries())
});请注意，Object.fromEntries(originalResponse.headers.entries())是一种简洁的方式来将Headers对象转换为一个普通的对象，以便传递给new Response()的headers选项。
完整示例代码
下面是一个将上述步骤整合在一起的完整示例：
(async () => {
const originalResponse = await fetch('https://jsonplaceholder.typicode.com/posts');
// 1. 检查响应是否成功
if (!originalResponse.ok) {
console.error(`Fetch failed with status: ${originalResponse.status}`);
// 返回原始错误响应或抛出错误
return originalResponse;
}
// 2. 提取并修改响应体内容
const originalText = await originalResponse.text();
let modifiedContent;
try {
const posts = JSON.parse(originalText);
// 示例修改：将所有帖子的body内容连接成一个字符串
modifiedContent = posts.map(post => post.body).join(' ');
// 或者，如果你只是想替换原始文本中的某个标记
// modifiedContent = originalText.replace("MARCADOR1", "ON-LINE");
} catch (e) {
console.warn("Could not parse response as JSON, treating as plain text for modification.");
// 如果解析失败，则按纯文本处理，进行简单的字符串替换
modifiedContent = originalText.replace("MARCADOR1", "ON-LINE");
}
// 3. 构建新的响应对象
const newResponse = new Response(modifiedContent, {
status: originalResponse.status, // 复制原始状态码
statusText: originalResponse.statusText, // 复制原始状态文本
headers: Object.fromEntries(originalResponse.headers.entries()) // 复制所有原始头部信息
});
// 如果内容类型发生了变化（例如从JSON变为纯文本），可能需要更新Content-Type头
if (originalResponse.headers.get('Content-Type')?.includes('application/json') && !modifiedContent.startsWith('[') && !modifiedContent.startsWith('{')) {
newResponse.headers.set('Content-Type', 'text/plain; charset=utf-8');
}
// 如果你修改了内容长度，也可能需要更新Content-Length头
// newResponse.headers.set('Content-Length', new TextEncoder().encode(modifiedContent).length);
console.log("Original Response Status:", originalResponse.status);
console.log("New Response Status:", newResponse.status);
console.log("New Response Body (first 200 chars):", (await newResponse.text()).substring(0, 200) + "...");
// 现在你可以返回或使用这个新的newResponse对象
return newResponse;
})();注意事项
- 响应体类型： 根据原始响应体的实际类型（文本、JSON、Blob等），选择合适的Response方法（text()、json()、blob()）来提取内容。
- 头部信息： 当你修改响应体内容时，某些头部信息可能也需要更新。例如，如果将JSON响应体转换为纯文本，你可能需要将Content-Type头从application/json更改为text/plain。如果修改后的内容长度发生变化，Content-Length头也应相应更新。
- 性能影响： 对于非常大的响应体，先完整读取内容到内存，再进行修改，最后再创建新的Response对象，可能会带来一定的内存和性能开销。在性能敏感的场景下，需要权衡这种方法的适用性。
- 流式处理： 对于需要实时处理或代理非常大文件的场景，如果直接修改整个响应体不可行，可能需要考虑使用TransformStream等Web Streams API进行更高级的流式转换，但这超出了本文的范围。
- 错误处理： 在解析响应体（尤其是JSON）时，务必添加错误处理机制，以防原始响应格式不符合预期。
总结
尽管Fetch API的Response对象是不可变的，但通过理解其工作原理，我们可以通过提取、修改内容并构造一个新的Response对象来间接实现响应体的修改。这种模式是处理Fetch响应体的标准和推荐方式，确保了代码的健壮性和可预测性。务必在实践中注意头部信息的同步更新和潜在的性能考量。
