Flask API响应被getReader()与TextDecoder截断的修复咨询

问题描述 #

我有一个返回HTML表格的Flask API，示例响应如下：

{
  "type": "text", 
  "content": "<table border=\"1\" class=\"dataframe table table-striped\">\n  <thead>\n    <tr style=\"text-align: right;\">\n      <th></th>\n      <th>Business Group</th>\n          <th>Person Type</th>\n      <th>Date of Birth</th>\n      <th>Hire Date</th>\n      <th>Tenure</th>\n      <th>Job Name</th>\n      <th>Job Level</th>\n      <th>HR Business Partner</th>\n      <th>Country</th>\n      <th>Geo</th>\n      <th>Age</th>\n      <th>Gender</th>\n      <th>Grade Type</th>\n     </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th>91</th>\n      <td>HR</td>\n       <td>Employee</td>\n      <td>1973-09-15</td>\n      <td>2020-06-09</td>\n      <td>4.257534</td>\n      <td>Product Designer</td>\n      <td>Manager</td>\n      <td>Luis Mendez</td>\n      <td>United States</td>\n      <td>Americas</td>\n      <td>51.021918</td>\n      <td>Female</td>\n      <td>3</td>\n     </tr>\n  </tbody>\n</table>"
}

前端使用以下代码读取响应时，发现chunk变量中的内容被截断：

then(response => {
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
        
  return reader.read().then(function processText({ done, value }) {
    if (done) {
      hideSpinner();
      return;
    }
                
    const chunk = decoder.decode(value, { stream: true });
    // 处理chunk的代码...
  });
});

截断后的响应内容示例：

{"type": "text", "content": "<table border=\"1\" class=\"dataframe table table-striped\">\n  <thead>\n    <tr style=\"text-align: right;\">\n      <th></th>\n      
        <th>Business Group</th>\n          <th>Person Type</th>\n      <th>Date of Birth</th>\n      <th>Hire Date</th>\n      <th>Tenure</th>\n      <th>Job Name</th>\n      <th>Job Level</th>\n      <th>HR Business Partner</th>\n      <th>Country</th>\n      <th>Geo</th>\n      <th>Age</th>\n      <th>Gender</th>\n      <th>Grade Type</th>\n     </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th>91</th>\n      <td>HR</td>\n       <td>Employee</td>\n      <td>1973-09-15</td>\n      <td>2020-06-09</td>\n      <td>4.257534</td>\n      <td>Product Designer</td>\n      <td>Manager</td>\n      <td>Luis Mendez</td>\n      <td>United States</td>\n      <td>Americas</td>\n      <td>51.021918</td>\n      <td>Female</td>\n      <td>3</td>\n

修复方案 #

原因分析 #

当前代码仅读取了响应流的第一个数据块就终止了，未循环读取所有后续chunk，导致内容被截断。

方案1：循环读取所有流数据 #

在processText函数中递归调用自身，直到流读取完成，同时拼接所有chunk内容：

then(response => {
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  let fullResponse = '';

  return reader.read().then(function processText({ done, value }) {
    if (done) {
      hideSpinner();
      // 解析完整响应并处理
      const data = JSON.parse(fullResponse);
      document.getElementById('table-container').innerHTML = data.content;
      return;
    }
                
    const chunk = decoder.decode(value, { stream: true });
    fullResponse += chunk;
    // 递归读取下一个数据块
    return reader.read().then(processText);
  });
});

方案2：使用response.json()简化处理 #

由于API返回的是JSON格式，无需手动处理流，直接用浏览器内置方法自动读取完整响应并解析：

then(response => {
  return response.json();
}).then(data => {
  hideSpinner();
  // 直接使用完整的JSON数据
  document.getElementById('table-container').innerHTML = data.content;
}).catch(error => {
  hideSpinner();
  console.error('请求出错:', error);
});

该方法更简洁，还能自动处理JSON解析错误，推荐优先使用。

内容的提问来源于stack exchange，提问作者Him Singhvi