前端精度问题 (id 返回的和传给后端的不一致问题)

eg: 后端返回 id 10976458979374929
前端获取到的: 10976458979374928

原因:
js 中 Number类型范围-2^53 + 1 到 2^53 - 1
Number.isSafeInteger()用来判断一个整数是否落在这个范围之内。

java中 Long 类型的取值范围是-2^63 + 1 到 2^63 - 1, 比JavaScript中大很多,所以后端能正常处理。

解决方法:
方式1:数据库中存的就是数值型,修改数据库存的类型为字符串
方式2:返回接口时转为字符串类型给前端

方式1:
如果我们使用的是axios请求数据,Axios 提供了自定义处理原始后端返回数据的 API:transformResponse , 可以这样处理:

axios({  
method: method,  
url: url,  
data: data,  
transformResponse: [function (data) {  
    // 将Long类型数据转换为字符串
    const convertedJsonString = data.replace(/"(\w+)":(\d{15,})/g, '"$1":"$2"'); 
    return JSON.parse(convertedJsonString);  
}],  
})


// 假设后端返回的JSON数据如下:
const responseData = {
  id: 12345678901234567890, // 这是一个Long类型数据
  name: "John Doe"
};

// 处理过的json数据
console.log(responseData.id); // 这将输出字符串:"12345678901234567890"
console.log(typeof responseData.id); // 这将输出 "string"

方式2 : json序列化处理
使用JSON.parse()转换为JS对象,但是由于JS的Number的范围为,超出安全整数范围无法精确表示。
我们可以借助json-bigint这个第三方包来处理。

json-bigint中的parse方法会把超出 JS 安全整数范围的数字转为一个 BigNumber
类型的对象,对象数据是它内部的一个算法处理之后的,我们要做的就是在使用的时候转为字符串来使用。

通过启用storeAsString选项,可以快速将BigNumber转为字符串,代码如下:

import JSONbig from "json-bigint";
    axios({  
    method: method,  
    url: url,  
    data: data,  
    transformResponse: [function (data) {  
+        const JSONbigToString = JSONbig({ storeAsString: true });
+          // 将Long类型数据转换为字符串
+          return JSONbigToString.parse(data);  
    }],  
    })
    
    
    // 假设后端返回的JSON数据如下:
    const responseData = {
      id: 12345678901234567890, // 这是一个Long类型数据
      name: "John Doe"
    };
    
    // 处理过的json数据
    console.log(responseData.id); // 这将输出字符串:"12345678901234567890"
    console.log(typeof responseData.id); // 这将输出 "string
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值