关于json-bigint处理大数字问题
json-bigint处理大数字问题
js里面的整数有安全范围,即最大能显示的范围,超过了这个范围可能会精度丢失
Number.MAX_SAFE_INTEGER //值为9007199254740991
json-bigint:可以像JSON.parse一样方便转换
用法:
//导入 import JSONbig from 'json-bigint' //可以通过axios的transformResponse方法,这个方法的作用是在传递给then/catch前,允许修改响应数据 //axios在这里默认把响应体从json字符串转成了js对象 axios.defaults.transformResponse = [function (data) { console.log(data)//这里的data是字符串,在这个字符串的是没有丢失精度的,所以需要在这里先把精度调好 try { //作用1:把json字符串转为js对象 //作用2:把里面的大数字做安全处理 return JSONbig.parse(data) }catch(){ return data; } //return data; }] //如果不写这个方法,返回的数据是自动就转为json对象的了,如果写了,就要自己转为对象,即return JSON.parse(data)
注意:
alert会自动调用了toString()方法
只要经过json-bigint转换后的id,直接toString(),就能得到真实的id
超大整型数字处理json-bigint的应用
1.json-bigint的作用和原理
json-bigint的作用:
项目中如果使用一些超出javascript语言限制的超大整型数字信息,该数字会变形为其他信息,为了避免产生问题,可以通过json-bigint做转换,使得超大整型数字可以正常使用,这就是json-bigint的作用。
情景:
- 后端服务器返回的文章id已经大大超过了js语言可以表达的最大整型范畴,因而直接使用的时候会发生变型:
例如:
- 本质id为:1215831343376629760
- 变型后为:1215831343376629800
console.log(1215831343376629760) // 输出为:1215831343376629800
- javascript中可以表达的最大整型可以通过如下代码获得:
console.log( Number.MAX_SAFE_INTEGER ) // 输出:9007199254740991
json-bigint的原理:
json-bigint会把超大整型的数字信息,拆分为小段信息存储到数组的各个元素中,待使用的时候再拼接到一起变为字符串。
github网站相关介绍: https://github.com/sidorares/json-bigint
json-bigint使用示例:
var JSONBig = require('json-bigint'); // 需要先安装 npm i json-bigint var str = '{ "value" : 9223372036854775807, "v2": 123 }'; var obj = JSONBig.parse(str) // 字符串--->对象 console.log(obj.value) // 9223372036854775807(正确) var obj2 = JSON.parse(str) // 字符串--->对象 console.log(obj2.value) // 9223372036854776000(错误)
结论:
- json-bigint会对一个包含超大整型信息的“字符串”做转换处理变为对象,这个对象可以获得正确的超大整型数字信息。
2.超大整型数字的具体处理
示例:
- 应用超大整型数字处理技术对接口返回的文章id信息做处理,使得可以被正确接收和使用。
- 服务器给客户端返回数据的第一手处理者是 “转换器( transformResponse )”,转换器处理完毕再交给响应拦截器使用,故要对超大整型数字信息做处理,下手点是"转换器"(响应拦截器获得数据已经是变形后的内容了)
本质上:服务器返回信息的类型是“字符串”,要经过转换器做JSONbig.parse()转化处理,所以响应拦截器接收到的是对象。
步骤:
1.安装工具依赖包:
npm i json-bigint
2.在src/utils/ax.js中引入json-bigint模块,对服务器返回的信息做处理,具体通过axios的 “数据转换” 机制实现:
import JSONbig from 'json-bigint' // 服务器端返回,数据转换器,应用 axios.defaults.transformResponse = [function (data) { // data的返回形式有两种 // 1. 实体字符串 // 2. 空字符串(不能转的) // JSONbig.parse针对超大整型进行处理,其他信息不给处理 if (data) { return JSONbig.parse(data) } return data }]
注意:
1.上述数据转换一定要设置else,以便对空字符串做处理,因为服务器有时候会返回空字符串信息。
2. json-bigint处理的是字符串类型的信息,超大整型数字给处理,普通信息不给与处理。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue2 this 能够直接获取到 data 和 methods 的原理分析
这篇文章主要介绍了Vue2 this能够直接获取到data和methods的原理分析,因为methods里的方法通过bind指定了this为new Vue的实例2022-06-06
最新评论