项目开发中前后端数据交互常会使用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

然后在请求方法文件中import JSONBigInt from 'json-bigint';

在请求函数中添加这一段转化代码,此时可以console.log出接收到的id为

其他地方不需要改动,这个时候前后端数据交互时id参数传输的时候会自动转化为字符串类型传输{id: "1528669910682107904"}

但是新问题又来了,现在是vue+element-ui项目,table表格绑定row-key="id",此时会报错

解决办法一:写一个全局转化函数

function transId(row) { return row.id.toString(); }

然后在使用到id的地方调用此函数,转化为字符串类型去处理eg: (:row-key="transId")

解决办法二:在之前import JSONBigInt的地方添加代码:

const JSONBigIntStr = JSONBigInt({ storeAsString: true });

自动将BigNumber转化为字符串类型,然后修改转化代码

这样console.log出id就不为BigNumber类型的了,而是字符串类型,且id和后台的id能够对应得上

JavaScript数据类型BigInt实践之id数值太大,导致前后端交互异常的更多相关文章

  1. ZTree id值太大,ZTree没有生成树,ZTree的id值过大

     ZTree id值太大,ZTree没有生成树,ZTree的id值过大 >>>>>>>>>>>>>>>> ...

  2. 分享工作中遇到的问题积累经验 事务日志太大导致insert不进数据

    分享工作中遇到的问题积累经验 事务日志太大导致insert不进数据 今天开发找我,说数据库insert不进数据,叫我看一下 他发了一个截图给我 然后我登录上服务器,发现了可疑的地方,而且这个数据库之前 ...

  3. 解决asp.net上传文件时文件太大导致的错误

    即使在web.config中添加了节点和设置依然是不行的,还是报文件太大的错误, <httpModules>       <add name="UploadHttpModu ...

  4. Android Bitmap太大导致ImageView不显示的问题

    今天做我们的智能相冊的项目时,遇到了非常奇妙的问题,当照片太大时,导致ImageView.setImageBitmap不显示,上网上搜了非常多办法.感觉都不是那么靠谱.最后使用了简单粗暴的手段: // ...

  5. PHP函数ip2long转换IP时数值太大产生负数的解决办法

    有两种办法: 1. bindec( decbin($long))  利用bindec和decbin两个函数转换一次就没有问题了 我一直在用上面的方法,但是在升级到PHP7以后就不起作用了(因为最近只进 ...

  6. PHP函数ip2long转换IP时数值太大而产生负数

    // 使用 sprintf 返回无符号十进制数 $long = sprintf("%u",ip2long($ip)); // 先转换为二进制然后在转换为十进制 $long = bi ...

  7. js数字位数太大导致参数精度丢失问题

    最近遇到个比较奇怪的问题,js函数里传参,传一个位数比较大,打印arguments可以看到传过来的参数已经改变. 然后查了一下,发现确实是js精度丢失造成的.我的解决方法是将数字型改成字符型传输,这样 ...

  8. [JS] js数字位数太大导致参数精度丢失问题

    http://www.cnblogs.com/littlestart/p/6023976.html

  9. git因commit的记录太大导致push失败解决方法

    发现好像这个方法不好使.......~~!还是会失败 如果有人或者自己失误把不该同步的大文件如数据或日志或其他中间文件给commit了并且push了,然后你删掉了,但是其实他仍然在你的git记录中,你 ...

随机推荐

  1. Python简单文件读写

    ''' 用文件存储账户信息 使用列表存储多个账户信息,每个账户为一个字典对象 ''' users=[] #创建一个空列表 users.append({'id':'admin','pwd':'1235@ ...

  2. 《头号玩家》AI电影调研报告(一)

    观<头号玩家>AI电影调研报告 一. 前言 有一部电影,上映开始就能让世界各不同年龄段.身处不同文化的人在一瞬间达到心意相通:其中的一些镜头,让影迷.游戏迷.ACG爱好者等拥有截然不同兴趣 ...

  3. Java多线程与线程池技术

    一.序言 Java多线程编程线程池被广泛使用,甚至成为了标配. 线程池本质是池化技术的应用,和连接池类似,创建连接与关闭连接属于耗时操作,创建线程与销毁线程也属于重操作,为了提高效率,先提前创建好一批 ...

  4. 各系统升级openssh

    修订号: [V1.0] 修订人: [陈土锋] 修订日期: [2019.06.04] 前言 该文档只适用用于服务器Redhat,centos,Ubuntu和suse系统的openssh升级.需要注意必须 ...

  5. SQLite 数据库使用记录

    SQLite 数据库使用记录 官网 https://www.sqlite.org/index.html 下载地址 https://www.sqlite.org/download.html 参考资料 S ...

  6. select下拉框获取下拉项值的问题

    新发现: select option如果里面不写value值,默认提交<option></option>中间的值. 切记:真正提交的值写在value属性里面,option之间只 ...

  7. 2021.11.05 eleveni的水省选题的记录

    2021.11.05 eleveni的水省选题的记录 因为eleveni比较菜,但是eleveni不想写绿题(总不能说是被绿题虐得不想写),eleveni决定继续水noip原题. --实际上菜菜的el ...

  8. jquery 动态 给select赋值

    <div class="right_left"> <select id="supply"> <option>请选择供应商&l ...

  9. Citus 11(分布式 PostgreSQL) 文档贡献与本地运行

    Citus 可以使用分片跨多台计算机来水平缩放查询. 其查询引擎会将这些服务器的传入 SQL 查询并行化,加快大型数据集上的响应. 它为需要比其他部署选项更大规模和更高性能的应用程序提供服务:通常,工 ...

  10. this-3

    this是什么?JavaScript中,this关键词指的是他所属的对象:它拥有不同的值,具体取决于它的使用位置. 1.在单独情况下,this指向全局对象window:2.在函数中,this指向全局对 ...