fetch调用银行汇率接口报JSON.parse第1行第2列异常怎么解决？

问题原因 #

你遇到的JSON解析失败确实和空格类字符异常有关，标准JSON本身允许半角空格作为分隔符，JSON linter报空格错误说明你拿到的响应里的空格不是普通半角空格，大概率是以下几种情况：

1. 响应开头带了UTF-8 BOM头（\uFEFF不可见字符），会直接导致JSON解析器在第1行第2位就识别到异常字符
2. 响应里的空白是全角空格、不间断空格（\u00A0）这类非标准空白字符，不符合JSON语法规范
3. 少数情况是响应前后夹带了多余的换行、注释等非JSON内容，浏览器Raw标签展示时默认隐藏了不可见字符，所以你看起来和文档示例一致。

解决步骤 #

• 第一步先打印原始响应文本确认问题：将json()调用替换为text()，输出原始内容的字符编码定位异常

const getRate = async () => {
    const res = await fetch(url)
    const rawText = await res.text()
    // 打印前10个字符的十六进制编码，快速定位BOM或异常空白
    console.log('前10字符编码：', [...rawText.slice(0, 10)].map(c => c.charCodeAt(0).toString(16)))
    console.log('原始响应内容：', rawText)
}

• 若排查到是BOM头导致，直接移除开头的BOM字符再解析：

const rawText = await res.text()
const cleanText = rawText.replace(/^\uFEFF/, '')
const rateData = JSON.parse(cleanText)

• 若排查到是非标准空白字符导致，替换所有异常空白后再解析：

const rawText = await res.text()
// 将全角空格、不间断空格替换为普通半角空格，再移除首尾多余空白
const cleanText = rawText.replace(/[\u3000\u00A0]/g, ' ').trim()
const rateData = JSON.parse(cleanText)

• 若响应夹带了多余非JSON内容，截取JSON有效段后再解析：

const rawText = await res.text()
// 定位JSON首尾的大括号位置，截取有效内容
const jsonStart = rawText.indexOf('{')
const jsonEnd = rawText.lastIndexOf('}')
const cleanText = rawText.slice(jsonStart, jsonEnd + 1)
const rateData = JSON.parse(cleanText)

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