在前端页面展示数据的时候,通常都需要处理来自后端的 json 数据。通常这个过程都是非常简单的,比如通过 jQuery 的ajax。但是如果 服务器 传来的json中包含一个很大的整数,如 { "id": 296675198462066688 } ,那么接受后会发现变成了 { id: 296675198462066700 } 。
简单的解决方法,让后端传给你string类型
但是后端的人会说:你们前端怎么显示个long类型都搞不定!
复制代码
问题原因
js是弱类型语言,所有的数字类型统称为Number类型,不区分int、long、double等。而Number是根据IEEE 754标准中的double来实现的,即所有的Number类型都是64位双精度实型。segmentfault上提供了一个对IEEE 574标准 非常友好的讲解,这里不再讲述。
js内置有32位整数,而number类型的安全整数是53位。如果超过53位的,你不能用json传递,需要用其他数据类型,比如字符串,或拆分成两个数据字段。
解决思路
GitHub开源项目—— Jison ,号称“bison in javascript”,通过它可以实现对后端返回数据的重新定义一个自己的json parser。
在拿到接口请求返回的数据的时候,不用json自带的那个parse方法,而是通过自己定义了一个json转换方法,然后再response给前端,这样一来前端拿到的数据就是一个处理过的json数据。
自定义 json parser
首先使用Node安装Jison
npm install jison -g
复制代码
同时在 lib 目录下提供了 cli.js 来生成我们想自定义的parser。参数有两个(详见cli.js代码), cli.js grammaFile lexFile ,grammaFile是语法文件,lexFile是词表文件。
下面就是怎么写这两个文件了,可以通过文档 来学习一下这类文件的语法。如果不想这么麻烦,还可以在jison作者的另一个项目—— jsonlint 里面找到,在github中该项目的src目录下提供了jsonlint.y(grammaFile)和jsonlint.l(lexFile)两个文件。使用这两个文件可以直接生成jsonlint.js,放到网页中当json parser来使用。
这里我们以修改jsonlint里面的两个文件为例生成我们所需要的json parse
我们的目的是让一些会丢失精度的整数被保留下来,最好的方法是:当整数超过了安全范围的时候,使用字符串表示。我们可以通过修改jsonlint.y来达到这个目的。
原本对JSONNumber的定义是
JSONNumber
: NUMBER
{$$ = Number(yytext);}
;
复制代码
在这里yytext是要进行解析的原始数据,$$是结果。我们可以修改成
JSONNumber
: NUMBER
{$$ = yytext == String(Number(yytext))? Number(yytext): yytext;}
;
复制代码
==> 生成我们要的 jsonlint.js:
git clone git://github.com/zaach/jsonlint.git
cd src
jison jsonlint.y jsonlint.l
复制代码
引入至项目
这里以Vue项目为例: 1、将自定义的 jsonlint.js 放到 static 目录下
2、在 index.html 中引入
复制代码
3、在我们请求的返回数据中,做一层拦截转换 此处以 axios 的实现方法为例:
// transformResponse 选项允许我们在数据传送到 `then/catch` 方法之前对数据进行改动
axios.defaults.transformResponse = [
function(data) {
return jsonlint.parse(data)
}
]
复制代码
总结
综上,通过自定义JSON转化避免long类型数据溢出,可以实现long类型数据在前端正常显示。
注意:这个方法的确可以实现前端拿到的数据不出现精度丢失问题,但是再浏览器中的Preview上查看数据还是一个丢失的错误数据,这个是因为浏览器它用的还是自己原始的那个json parse方法。
后记:小伙伴们,如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果觉得本文还不错,记得点个赞哦! 本文首发地址为: