double丢失精度_js long 精度丢失问题_js精度丢失解决办法

今天开发遇到个问题js精度丢失解决办法,服务器后端的Long类型数据,传到前端会出现精度丢失,如:164379764419858435,前端会变成164379764419858430。

在浏览器中做测试可知,这就是一个精度丢失的问题。

前端使用的axios来发起请求的,最开始以为是浏览器的问题,但是通过postman来请求是没问题,打开浏览器开发工具,在xhr下的response响应中也是没问题的,代表是请求成功后数据格式化出问题了,下面讲解下各种解决方案。

出现原因

后台数据库定义的bigint类型(对应Long)的值太长会导致传递给前端的时候精度丢失,其原因是后端语言和js对字节码的解析长度不一样。

前端js对Long类型支持的精度不够,导致后端使用的Long传到前端丢失精度。

方案一:

前端引入 json-bigint

yarn add json-bigintnpm install json-bigint

在axios封装的地方,transformResponse 在传递给 then/catch 前,允许修改响应数据。

export const list = (data) => {    return request({        url: baseUrl + '/fly63/api/list',        method: 'post',        params: data,        transformResponse: [ data => {            data = JSONbig.parse(data);            data.list.filter((item)=>{                item.id = item.id.toString();                return item;            })            return data;        }],    })}

方案二:

修改axios的源码js精度丢失解决办法,在node_modules/axios/lib/default.js中找到transformResponse 将其内容改为

transformResponse: [function transformResponse(data) {    /*eslint no-param-reassign:0*/    if (typeof data === 'string') {      try {        data = JSON.parse(data);      } catch (e) { /* Ignore */ }    }    return data;  }],

方案三:

后台传到前台时,Long类型数据,转为String类型。可以直接操作传回的对象数据,toString()该long类型数据。(推荐)

学习更多技能

请点击下方公众号

js long 精度丢失问题_js精度丢失解决办法_double丢失精度

js long 精度丢失问题_double丢失精度_js精度丢失解决办法