json-bigint处理大整数问题(详解)

现象

通过ajax请求回来的数据在response和preview两种状态显示的id是不同的。

如图:

原因

response中的看到的数据格式其实是字符串(ajax请求回来的数据本质上是字符串格式),preview其实是用了JSON.Parse(字符串) 给我们做美化(格式化),这个转换过程中,一般不会出问题,但是,如涉及大数(一个很大的整数,超过了javascript最大的处理能力),就会产生转换精度丢失------- 就产生了错误了。

JavaScript 能够准确表示的整数范围在-2^532^53之间(不含两个端点),超过这个范围,无法精确表示这个值,这使得 JavaScript 不适合进行科学和金融方面的精确计算。  

上面代码中,超出 2 的 53 次方之后,一个数就不精确了。  

解决方法 

json-bigint 是一个第三方包,它在把json字符串转json对象的过程中,自动识别大整数,把大整数转成一个对象来表示,这样就不会产生精度丢失的问题了。

npm安装指令:npm i json-bigint

示例

import JSONbig from 'json-bigint'

const str = '{ "id": 1253585734669959168 }'

console.log(JSON.parse(str)) // 1253585734669959200

// 它会把超出 JS 安全整数范围的数字转为一种类型为 BigNumber 的对象
// 我们在使用的时候需要把这个 BigNumber.toString() 就能得到原来正确的数据了
console.log(JSONbig.parse(str))
// 对于JSONbig 它在处理数据时,会自动识别其中的 大数, 并以数组的格式保存起来
console.log(JSONbig.parse(str).id.toString()) // 1253585734669959168

解决开头说的问题只需要在axios中配置一下就行,用到了transformResponse这个配置属性:

import JSONBig from 'json-bigint'
 
const res = axios.create({
  // 接口的基础连接
  baseURL: 'http:// www.xxxxx.com/',
  // 自定义返回的元素数据,axios会默认用JSON.parse
  // `transformResponse` 在传递给 then/catch 前,允许修改响应数据
  transformResponse: [
    function (data) {
      // 对 data 进行任意转换处理
      try {
        return JSONBig.parse(data)
      } catch (err) {
        return data
      }
    }
  ]
})

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值