今天开发遇到个问题，服务器后端的Long类型数据，传到前端会出现精度丢失，如：164379764419858435，前端会变成164379764419858430。
在浏览器中做测试可知，这就是一个精度丢失的问题。
前端使用的axios来发起请求的，最开始以为是浏览器的问题，但是通过postman来请求是没问题，打开浏览器开发工具，在xhr下的response响应中也是没问题的，代表是请求成功后数据格式化出问题了，下面讲解下各种解决方案。
后台数据库定义的bigint类型（对应Long）的值太长会导致传递给前端的时候精度丢失,其原因是后端语言和js对字节码的解析长度不一样。
前端js对Long类型支持的精度不够，导致后端使用的Long传到前端丢失精度。
前端引入 json-bigint
|
1 2 3 |
yarn add json-bigint 或 npm install json-bigint |
在axios封装的地方，transformResponse 在传递给 then/catch 前，允许修改响应数据。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import JSONbig from 'json-bigint' 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的源码，在node_modules/axios/lib/default.js中找到transformResponse 将其内容改为
|
1 2 3 4 5 6 7 8 9 10 11 |
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类型数据。（推荐）
from:
https://blog.csdn.net/snsHL9db69ccu1aIKl9r/article/details/118282599
https://www.npmjs.com/package/json-bigint