前端处理后端传回的 Long 类型数据精度丢失

前端处理后端传回的 Long 类型数据精度丢失

1 问题描述

  直接抛问题，如下图所示：

  查看 Network 时，响应回来的 Long 类型数据和在控制台打印的数据出现的精度丢失的问题。

2 问题原因

  经查阅资料，原来 JS 内置有 32 位整数，而 number 类型的安全整数是 53 位。如果超过 53 位，则精度会丢失。正如现在后台传来一个 64 位的 Long 类型整数，因此超过了 53 位，所以后台返回的值和前台获取的值会不一样。

后端可以给前端传一个 Long 类型的数据，但是这个 Long 类型的数据也不能太长，不然 js 转换乏力。

3 解决办法

3.1 后端处理

  一般不需要进行实体类属性的数据类型修改，SpringBoot 中提供了一个解决方法，在 application.properties 配置文件中添加如下配置即可：

# 将所有数字转为 String 类型返回，避免前端数据精度丢失的问题
spring.jackson.generator.write-numbers-as-strings = true

3.2 前端处理

• 设置数据接收类型： dataType : ‘text’

• 在 success 回调函数里添加：res.data = handleResData(res.data)

  handleResData(str) 将所有对应的长整数 value，通过正则查出加上字符串的双引号标识，然后进行 JSON.parse() 转回 String。该方法并不能进行长整数计算，需要的话可以使用 long.js。

• 以微信小程序来举例如下：

wx.request({
          url: '******',
          data: {
          },
          dataType: 'text',
          header: {
            'content-type': 'application/x-www-form-urlencoded', 
            'token': wx.getStorageSync('token')
          },
          method:  'POST',
          success: function(res){
            res.data = that.handleResData(res.data)
            // 数据处理
          },
          fail: function(err){}
        })
    

function handleResData(str){
	var _str = str
	for(var i = true; i == true;){
		var i = /[:][0-9]{18,}[,]?/.test(_str) 
		if(i == true){
		var handlestr = /[:][0-9]{18,}[,]?/.exec(_str)
		var handlestr2 = /[0-9]{18,}/.exec(handlestr[0])
		_str = _str.replace(handlestr[0], ':"'+handlestr2[0]+'",')
		}
	}
	_str = _str.replace(/[,][}]/g,'}')
	return JSON.parse(_str)
}