解决后台传入的大于js最大数值精度的问题

2022-06-23 09:47:20

在JavaScript中有最大安全精度值 9007199254740992,超过了这个值,js会失去精度,而将其后面的数字都解析为0
例如9007199254740992564在js控制台打印,只能打印出9007199254740992000,其后面的几位数已经失去了精度

在实际项目中,后台会返回一些超出js精度范围的值,这时候js会失去精度,从而在解析的时候报错
这时候一般在服务器返回的数据进行处理

//基本原理—接收到后台返回的数据后在使用json-bigint 代替json去解析数据
//安装
npm install json-bigint

// 导入json-bigint
import JSONBig from ‘json-bigint’

问题:由于服务器发回 的数据中id值 已经大于了js的最大安全值,因此需要对服务器返回数据进行处理
// 对服务器返回的数据进行转换

一般在main.js中引入axios文件后设置下面的代码

//在axios的transformResponse中转换 返回数据
axios.defaults.transformResponse = [
  function (data) {
  // data:即是服务器返回的数据
    console.log(data)
    console.log(JSONBig.parse(data))
    console.log(JSON.parse(data))

    try {
      return JSONBig.parse(data)
    } catch (err) {
      return data
    }
    //以上try-catch代码中内容亦可直接替换下面的代码
    //return JSONBig.parse(data)
  }
]

下面是console.log(data)的数据,返回的是json字符串格式
在这里插入图片描述

console.log(JSONBig.parse(data))----json-bigint已经将超过精度的id值转换成了BigNumber对象,在使用数据id时,我们只需要调用方法results[0].id.toString()方法,打印出的id值与json转换的一样
下面是另一组被换的id值对象

在这里插入图片描述
下面的是json方法转换的后台返回数据,比较json-bigint的转换数据,我们发现,json去解析的话,超过53位的整形会出现精度丢失的问题,数值的最后两位直接精度丢失被解析作00
在这里插入图片描述

  • 作者:考拉菜鸟
  • 原文链接:https://blog.csdn.net/chunmeizhang_88/article/details/102555207
    更新时间:2022-06-23 09:47:20