React Native中fetch请求无法正常接收解析大型响应的报错问题

核心错误原因 #

报错SyntaxError: JSON Parse error: Expected ']'说明解析的JSON结构不完整，数组缺少闭合括号，结合大响应下必现的特征，本质是fetch拿到的响应数据被截断，并非上层代码逻辑错误。

第一步：定位问题根因 #

先将响应转成原始文本打印，确认是否存在响应截断问题，调试代码如下：

fetch(url)
.then(response => {
    if(response.status!==200){
        alert('Something went wrong, please try again later');
        return null
    }
    // 先获取原始文本验证完整性，不直接转JSON
    return response.text()
})
.then(rawText => {
    if (rawText == null){return}
    console.log('原始响应长度：', rawText.length)
    console.log('原始响应内容：', rawText)
    // 手动尝试解析JSON
    try {
        const data = JSON.parse(rawText)
        console.log('解析成功数据：', data)
    } catch (e) {
        console.error('JSON解析失败：', e)
    }
})
.catch(err => {
    console.error('请求链路报错：', err)
})

如果打印的原始响应内容确实是不完整的JSON结构，即可确认是响应被截断问题。

通用修复方案 #

• 补全Promise异常捕获
  你当前的代码缺少catch块，会直接抛出未处理的Promise rejection错误。补全catch后可以针对解析失败场景添加3~5次重试逻辑，解决偶发的网络波动导致的传输中断问题。
• 修复RN原生fetch截断bug
  1. 升级RN到0.67及以上稳定版，该版本修复了Android端fetch处理GZIP压缩大响应时的截断问题
  2. 无法升级版本的场景，可修改Android端原生OkHttp配置，增大响应缓冲阈值，关闭自动GZIP解压后手动处理响应解压
• 第三方库替代
  原生fetch的问题无法快速修复时，可直接替换为axios等成熟的第三方请求库，绝大多数场景下可以规避RN原生fetch的实现缺陷
• 服务端配合优化
  大数组返回场景建议做分页拆分，单次返回数据量控制在合理范围，既可以降低传输失败概率，也可以提升前端渲染性能

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