使用json-bigint处理后台返回的大整数问题

首先,后端返回的数据一般是JSON格式的字符串,

而axios 会默认自动把后端返回的JSON格式的字符串使用JSON.parse()转换为JS对象,但是由于JS的安全整数范围为
在这里插入图片描述
因此,如果后端返回的数据中有超过这个范围的数字(如用户的ID),则这种默认的转换方式将会出错,转换过来的数据将会不准确。

此时的解决方案:

采用第三方包json-bigint,这个包中的parse方法将可以解决这个问题。

原理:

使用parse()方法后,json-bigint 会把超出 JS 安全整数范围的数字转为一个 BigNumber 类型的对象(这个对象是它内部的一个算法处理之后的),我们要做的就是把这个对象转为字符串:BigNumber.toString() ,这样就能得到原来正确的数据了。

解决思路:

不要让 axios 使用 JSON.parse 来转换这个数据,而是使用 json-bigint 来做转换处理。即我们需要得到后端给我们返回的不经转化的、最原始的数据,而axios刚好提供给我们一个API:transformResponse,专门用来定制后端返回的原始数据的处理(此函数中的参数data就是原始数据)。

使用步骤:

1、安装:npm install json-bigint
2、导入:import JSONbig from ‘json-bigint’
3、使用:在 request.js 请求模块中添加以下处理代码:
在这里插入图片描述
之所以要使用try…catch,是因为后端返回的数据有可能不是JSON格式的字符串,如果要转换的数据格式不是字符串的话,程序将会报错,所以需要捕获异常,在异常处理的代码块中把原始数据返回。

我们说这个JSONbig是用来处理大数字的,但是没超过整数范围的json数据它也是能正常转换的。因此,在上面的代码块中我没有直接把toString写上去,只有当返回的数据超出了安全整数范围,然后经过transformResponse转换为BigNumber时,才需要写上tostring。

JavaScript 中,处理大整数时,通常会出现精度问题。这时可以使用 `json-bigint` 库来解决这个问题。`json-bigint` 库是一个可以处理大整数JSON 解析器和字符串序列化器,可以支持任意长度的整数,并且提供了一些方便的方法来处理大整数。 下面是一个简单的使用 `json-bigint` 库的示例: ```javascript const JSONbig = require('json-bigint'); // 将 JSON 字符串解析为 JavaScript 对象 const jsonString = '{"id": 1234567890123456789}'; const jsonObj = JSONbig.parse(jsonString); console.log(typeof jsonObj.id); // 输出:object // 将 JavaScript 对象序列化为 JSON 字符串 const jsonString2 = JSONbig.stringify(jsonObj); console.log(jsonString2); // 输出:{"id":1234567890123456789} ``` 在上述代码中,我们首先引入了 `json-bigint` 库,然后通过 `JSONbig.parse()` 方法将 JSON 字符串解析为 JavaScript 对象。由于该对象的 `id` 属性是一个大整数,我们在使用 `typeof` 操作符检查其类型时,得到的是 `object`。接着,我们使用 `JSONbig.stringify()` 方法将 JavaScript 对象序列化为 JSON 字符串,并输出结果。 需要注意的是,`json-bigint` 库的使用方式和原生的 `JSON` 对象基本相同,只是在解析和序列化时需要使用 `JSONbig.parse()` 和 `JSONbig.stringify()` 方法。还有一点需要注意的是,使用 `json-bigint` 库时,需要确保被解析的 JSON 字符串中的大整数没有被转换成科学计数法形式。如果被转换成科学计数法形式,可能会导致 `JSONbig.parse()` 方法解析失败。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值