JavaScript中拼接分批返回的HTTPS响应数据问题求助

我来帮你搞定这个分批数据拼接加清理时间戳的问题，咱们一步步拆解实现：

一、核心问题拆解 #

首先明确我们要完成三件核心事：

• 逐批接收服务器返回的数据流
• 清理首批数据里的两处调试时间戳（开头和"rows":后面的）
• 拼接所有批次后解析JSON，提取你需要的目标数据

二、具体实现方案 #

1. 用Fetch API处理分批数据流 #

Fetch的response.body是一个可读流，我们可以逐块读取并处理，代码示例如下：

async function fetchAndCombineData(targetUrl) {
  let fullData = '';
  const response = await fetch(targetUrl, {
    method: 'GET', // 根据你的实际请求方法调整，比如POST
    headers: {
      // 这里加你的请求头，比如Authorization、Content-Type等
      // 'Authorization': 'Bearer your-token',
      // 'Content-Type': 'application/json'
    }
  });

  if (!response.ok) {
    throw new Error(`请求失败，状态码：${response.status}`);
  }

  const reader = response.body.getReader();
  const decoder = new TextDecoder('utf-8');
  let isFirstChunk = true; // 标记是否是第一块数据（需要清理时间戳）

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    // 把二进制数据解码成字符串
    let chunk = decoder.decode(value, { stream: true });

    // 只处理第一块的时间戳
    if (isFirstChunk) {
      chunk = cleanTimestampFromFirstChunk(chunk);
      isFirstChunk = false;
    }

    fullData += chunk;
  }

  // 完成最后一部分的解码
  fullData += decoder.decode();

  // 解析JSON并提取需要的数据
  const parsedResult = JSON.parse(fullData);
  return extractTargetData(parsedResult);
}

2. 编写时间戳清理函数 #

你提到首批数据开头和"rows":后有调试时间戳，我写了一个通用的清理函数，你可以根据实际时间戳的格式调整正则：

function cleanTimestampFromFirstChunk(chunk) {
  // 第一步：移除开头的时间戳
  // 假设开头是类似 [1698765432] 这种格式，你可以根据实际修改正则
  chunk = chunk.replace(/^\[\d+\]/, '');

  // 第二步：移除"rows":后面的时间戳
  // 假设是 "rows":[1698765432] 这种格式，替换成 "rows:"
  chunk = chunk.replace(/"rows":\s*\[\d+\]/, '"rows":');

  // 如果你的时间戳是其他格式（比如用括号、或者带字母），直接修改正则匹配规则即可
  return chunk;
}

3. 提取目标数据 #

假设解析后的JSON里rows数组是你需要的数据源，这里示例提取每个元素的id和name字段：

function extractTargetData(parsedData) {
  // 根据你的实际需求修改提取逻辑
  return parsedData.rows.map(item => ({
    id: item.id,
    name: item.name
    // 可以加更多你需要的字段
  }));
}

4. 备选方案：用XMLHttpRequest处理 #

如果你的项目需要兼容老浏览器，也可以用XHR的onprogress事件来接收分批数据：

function fetchWithXHR(targetUrl) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', targetUrl);
    // 设置请求头
    // xhr.setRequestHeader('Authorization', 'Bearer your-token');

    let fullData = '';
    let isFirstChunk = true;

    xhr.onprogress = function(e) {
      if (e.lengthComputable) {
        // 提取本次新增的chunk
        const newChunk = xhr.responseText.substring(fullData.length);
        let cleanedChunk = newChunk;
        
        if (isFirstChunk) {
          cleanedChunk = cleanTimestampFromFirstChunk(newChunk);
          isFirstChunk = false;
        }
        
        fullData += cleanedChunk;
      }
    };

    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        const parsedData = JSON.parse(fullData);
        resolve(extractTargetData(parsedData));
      } else {
        reject(new Error(`请求失败，状态码：${xhr.status}`));
      }
    };

    xhr.onerror = function() {
      reject(new Error('网络请求发生错误'));
    };

    xhr.send();
  });
}

三、关键注意事项 #

• 正则匹配调整：一定要先打印第一块原始数据，确认时间戳的具体格式（比如是方括号、圆括号还是其他符号），再修改cleanTimestampFromFirstChunk里的正则，不然可能清理不干净
• 编码问题：默认用utf-8解码，如果服务器返回的是其他编码，要对应修改TextDecoder的参数
• 压缩数据处理：如果服务器返回gzip压缩的数据，Fetch会自动解压，但XHR可能需要你在请求头里加Accept-Encoding: gzip, deflate，并手动处理解压（可以用pako库）

内容的提问来源于stack exchange，提问作者O King