js中id和class（JavaScript数据类型BigInt实践之id数值太大，导致前后端交互异常）

项目开发中前后端数据交互常会使用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 fromjson-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能够对应得上