解决JS处理api返回number字段精度丢失问题

前端在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博客

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值