位置: IT常识 - 正文
JavaScript数据类型BigInt实践之id数值太大，导致前后端交互异常(javascript数据类型分为哪两类)
编辑：rootadmin推荐整理分享JavaScript数据类型BigInt实践之id数值太大，导致前后端交互异常(javascript数据类型分为哪两类)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:javascript数据类型不包括,javascript数据类型不包括,javascript数据类型主要有,javascript数据类型转换,javascript数据类型,javascript数据类型分为哪两类,javascript数据类型分为哪两类,javascript数据类型分为哪两类,内容如对您有帮助，希望把文章链接给更多的朋友！
项目开发中前后端数据交互常会使用id作为主键索引，通常id数值都不大，使用number类型就可以表示处理，但对于一些分布式id或其他情况，id数值太大且超过了JS的最大处理数(Math.pow(2,53) =9007199254740992)时就会存在精度问题：Math.pow(2, 53) + 1 =9007199254740992;
实际例子：
当后端返回了这样一个id数值的数据，可以看到此数值已经超过了JS的最大处理数，丢失了精度，前端此时拿到的id值是错误的，此时涉及id的前后端数据交互，前端传输的参数id为1528669910682108000，后端无法根据此id找到对应的数据或者找出了其他数据导致异常
可以通过浏览器控制台Network的Preview和Response查看差异。Response中是原始响应数据，这里的id是正确的为1528669910682107904。而Preview中是浏览器接收到Response，通过JS转化为JavaScript对象形式，并格式化层级结构，以便查看，此时经过了JS处理，id数值精度丢失，看到的就是1528669910682108000这个错误id，前端请求后接收到的id也是这个错误id。
解决办法一：通过后端解决，把id转化为字符串类型返回
这样获取到的id就是正确的id了，但是后端有数据类型严格定义，不愿意改的话，那就靠我们前端来解决（方法二）
解决办法二：JavaScript新增的基础数据类型bigint就可以解决此类问题
将id转化为bigint类型，使用到json-bigint插件处理json数据中的这类数值
npm install -S json-bigint 底层依赖于bignumber.js
然后在请求方法文件中importJSONBigInt from'json-bigint';
在请求函数中添加这一段转化代码，此时可以console.log出接收到的id为
其他地方不需要改动，这个时候前后端数据交互时id参数传输的时候会自动转化为字符串类型传输{id: "1528669910682107904"}
但是新问题又来了，现在是vue+element-ui项目，table表格绑定row-key="id"，此时会报错
解决办法一：写一个全局转化函数
functiontransId(row) { return row.id.toString();}
然后在使用到id的地方调用此函数，转化为字符串类型去处理eg: (:row-key="transId")
解决办法二：在之前import JSONBigInt的地方添加代码：
constJSONBigIntStr = JSONBigInt({ storeAsString: true });
自动将BigNumber转化为字符串类型，然后修改转化代码
这样console.log出id就不为BigNumber类型的了，而是字符串类型，且id和后台的id能够对应得上
上一篇：python怎么把数据保存为excel(Python怎么把数据倒着输出)
下一篇：静态链接(linux 静态链接)
