JavaScript Fetch API：修改响应体内容的最佳实践

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;
}

const originalResponse = await fetch('https://jsonplaceholder.typicode.com/posts');

// 假设响应体是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");
}

const newResponse = new Response(modifiedContent, {
  status: originalResponse.status,
  statusText: originalResponse.statusText,
  // 复制所有原始头部信息
  headers: Object.fromEntries(originalResponse.headers.entries())
});

(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;

})();