为何微软浏览器会将对象数组转换为数组的数组？

这种没改代码却突然冒出来的兼容性bug真的让人头大，尤其是只在微软系浏览器里触发的情况，我来帮你梳理下可能的原因和解决思路：

• API端隐性变更：虽然你们团队没提交代码变更，但API部署的服务器、负载均衡或者网关可能有配置调整（比如开启了自动分页、响应分片传输）。微软浏览器对这类分片响应的解析逻辑和其他浏览器存在差异，导致完整的数组被拆成了10个一组的子数组。
• 浏览器版本更新影响：3月6日前后微软系浏览器（Edge/IE）有没有推送版本更新？部分版本的JS引擎可能对JSON数组的解析逻辑做了调整，尤其是当响应头包含Transfer-Encoding: chunked时，更容易出现这种拆分问题。
• 前端依赖库自动更新：如果你们用了第三方请求库（比如axios、fetch封装工具），可能依赖库开启了自动更新，新版本在微软浏览器下的响应处理逻辑发生了变化，间接导致了这个问题。

1. 直接校验API原始响应：打开浏览器开发者工具的Network面板，或者用Fiddler抓包，查看API的原始响应：
   • 检查响应头是否存在Transfer-Encoding: chunked，如果有，查看每个chunk的内容是不是刚好对应10个对象的数组片段。
   • 复制响应的原始文本，在本地用JSON.parse()解析，看是否会被拆分成子数组，以此排除前端代码解析的问题。
2. 对比浏览器版本：收集出现问题的微软浏览器版本号，和bug出现前正常使用的版本对比，确认是否是浏览器更新引发的兼容性问题。
3. 检查依赖库版本变化：查看项目中请求相关依赖（比如axios、fetch polyfill）的版本记录，对比3月6日前后的版本差异，确认是否有自动更新的情况。

• 手动合并子数组：如果前端已经拿到拆分后的嵌套数组，可以在代码里强制合并：

  // 假设拿到的异常数据是嵌套数组：products = [[...10个产品], [...10个产品], ...]
  // 方法1：用concat展开合并
  const mergedProducts = [].concat(...products);
  // 方法2：用flat方法（兼容ES2019及以上）
  const mergedProducts = products.flat(Infinity);
  

• 关闭分片传输：如果确认是chunked传输导致的问题，可以尝试在请求头里添加Connection: close，强制关闭分片：

  fetch('/your-product-api-url', {
    headers: {
      'Connection': 'close'
    }
  })
  

• 回退依赖库版本：如果排查出是第三方请求库更新导致的问题，回退到bug出现前的稳定版本，并在package.json里锁定版本号，避免自动更新。

补充示例 #

API返回数组预期示例

[
  {"id": 1, "name": "Product 1"},
  {"id": 2, "name": "Product 2"},
  // ... 共52个产品对象
]

微软浏览器下控制台输出的异常数组示例

// 控制台打印products变量的结果
[
  [{"id":1, ...}, {"id":10, ...}],
  [{"id":11, ...}, {"id":20, ...}],
  [{"id":21, ...}, {"id":30, ...}],
  [{"id":31, ...}, {"id":40, ...}],
  [{"id":41, ...}, {"id":50, ...}],
  [{"id":51, ...}, {"id":52, ...}]
]

内容的提问来源于stack exchange，提问作者Colin Darland