问题 :后端Long数据类型 前端精度问题。
服务器后端的Long类型数据,传到前端会出现精度丢失,如:1686581025305661440,前端会变成1686581025305661400。
我们可以在页面中console.log一下我们的数据 看我们请求到的数据是什么 在控制台网络预览中查看数据 在我们解决问题后需要在响应中查看 预览中数据还是错误数据!
问题原因:
js当中number类型的安全整数是53位,如果超过53位,则精度会丢失。如果后台传来一个64位的Long型整数,因为超过了53位,所以后台返回的值和前台获取的值会不一样。上面的例子可以看到,17位以后的数字变成了0,第17位四舍五入。
如何避免精度丢失呢?最常用的办法就是将Long类型字段统一转成String类型。
解决办法:
方案一 :前端引入 json-bigint
yarn add json-bigint
或
npm install json-bigint
在axios封装的地方,transformResponse 在传递给 then/catch 前,允许修改响应数据。
import JSONbig from 'json-bigint';
const JSONbigToString = JSONbig({ storeAsString: true })
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项,表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API,
// 超时
timeout: 30000,
//在创建axios实例时插入以下代码对响应的数据进行修改
//将后端返回的Long转为字符串来解决精度丢失的问题
transformResponse: [function (data) {
try {
//转换
return JSONbigToString.parse(data)
} catch (err) {
//转换失败就直接按原数据返回
return data;
}
}]
})
方案二 :修改axios的源码,在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类型数据。(推荐)