vue前端解决long类型精度丢失问题(雪花ID)

📅 2026/7/10 6:30:45 👁️ 阅读次数 📝 编程学习
vue前端解决long类型精度丢失问题(雪花ID)

起因

起因是后端ID查询始终为空,经排查发现前端请求携带的id参数精度丢失,类似于四舍五入。

解决方案

前端

使用json-bigint库,专门处理大整数 JSON 解析的库,会自动将超出安全范围的数字转为 BigInt,避免精度丢失。

安装依赖

npm install json-bigint # 或者使用yarn yarn add json-bigint

使用方法

import axios from 'axios'; import JSONBig from 'json-bigint'; // 创建自定义解析器 const jsonParser = JSONBig({ storeAsString: false, // false:转为BigInt;true:转为字符串 }); // 配置axios const myAxios = axios.create({ baseURL: '/api', // 重写响应数据的解析方式 transformResponse: [function (data) { try { // 用json-bigint解析数据 return jsonParser.parse(data); } catch (e) { // 解析失败时用默认方式 return JSON.parse(data); } }] }); export default myAxios;

后端

方法一:将ID字段设置为String,从而避免长整型的精度丢失

方法二:如果实体类非要使用long类型的话,可以在响应封装类和请求封装类中将id转换为字符串类型