前端在ajax方式调用第三方接口时出现了一个诡异的问题,同一个接口url通过axios访问接口获取到的数据与浏览器访问的数据id不一致,如下图所示:
通过浏览器访问的数据id
axios ajax访问到的数据
axios ajax response数据
可以很明显看到这个长整数的最后一位精度损失了,马上联想到应该是数字类型的长度过长,超出了js number类型处理的长度。
查资料验证了一下对问题的判断,确认了问题出在了对接口响应结果的JSON.parse解析阶段,JSON解析时由于JS在处理id字段对应为number类型时,超出了JS的number类型最大2的53次方范围,因此超出的精度被舍弃导致。
根据问题分析的原因,由于使用axios发起的接口请求,前端可采取的解决方案主要有两种:
1)在进行JSON.parse之前,将返回字符串中的长整型替换为字符串类型;
let reqObj = {
url: `${URL.ADSERVICE_HOST}appapi/getAdspaceList`,
method: 'get',
params: query,
transformResponse: [response => JSON.parse(response.replace(/("id":)(\d{0,})(,)/g, '$1'+'"'+'$2'+'"'+'$3'))] //采用分组匹配,$1匹配"id":,$2匹配id值,$3匹配,
}
axios(reqObj).then((response) => {
console.log(response.data)
})
2)从JSON.parse入手,不使用原生的JSON解析,采用自定义的JSON解析方法。
此种方式可参考:【解决方案】jison解决JS处理后台返回的Long型数据精度丢失_Kuroko's Development Notes-CSDN博客