后端返回的id到前端后 后面几位数全部变成0了 问题解决

已于 2023-09-20 17:11:52 修改
阅读量2.1k 收藏 2
点赞数 1
文章标签： 前端 后端
于 2023-09-13 09:45:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45966674/article/details/132845832
版权

这里 我在java控制台上 输出了id的值
在这里插入图片描述
但请求到前端后 很明显就不太一样了
在这里插入图片描述
这个问题比较经典的叫法是 雪花算法生成的ID过长，前端接收精度丢失
原因
前端使用number类型进行接收，number类型的范围小于后台Long类型的范围，出现了精度丢失问题。

简单说 number 类型 接不了那么大的数值 后面的值直接被四舍五入了

这个问题 其实前后端都能处理
前端处理的话 我的文章 vue项目通过json-bigint在前端处理java雪花id过长导致失去精度问题有讲过
但我个人建议还是后端去处理 因为你要想 这个问题本身就是因为你后端不够成熟
因为个人经历不完整导致的 而且这个问题 所以 我觉得我们既然弄出了这个问题 还是由我们自己填上比较好

其实很简单
在这里插入图片描述
long到了前端转数字类型 有大小限制 但 字符串没有呀

这里 java long转字符串 可以用

long number = 1234567890L;
String str = Long.toString(number);

然后前端传回给你
字符串转 long 可以用

String str = "1234567890";
long number = Long.parseLong(str);

然后 我们运行项目 前端发送请求
在这里插入图片描述
可以看到 字符串就不会出现这个问题了
在这里插入图片描述

一个“微前端”逼走了2位90后——谈谈被后端逼走的前端
网尘的技术专栏
07-10 1043
作为团队领导者，需要经常帮助组员解决各类阻塞问题，而一直从事后端的开发，导致对前端的知识储备并没有那么丰富（实际很简陋）。而当下流行的开发模式几乎都是前后端分离的，因此组建好团队，前端、后端几乎1比1配置好像有些不太对，因此稍微倾斜了下后端，按80%配置前端。我们的新的产品，后端采用微服务，前端采用微前端，感觉是绝配啊。没想到，悲剧就此拉开序幕… 为了组建团队，需要进行多轮次的面试，遴选人才不是一个轻松的活。揣着一颗忐忑不安的心，在备足了前端的知识后，开始上岗面试了。我的一般步骤是：进入正题前，和他.
python前端通过API接口调用与后端进行数据交互前端如何调用api接口获取电商平台商品详情信息数据
APItesterCris的博客
05-22 422
请求参数：num_iid=652874751412&is_promotion=1。is_promotion:是否获取取促销价。参数说明：num_iid:商品ID。
解决前后端因js导致Long值精度丢失问题
weixin_54641589的博客
07-17 386
解决前后端因js导致Long值精度丢失问题
场景问题——雪花算法生成的id在前端使用时末尾几位数都成了0是什么原因
qq_41905890的博客
11-07 683
首先说明原因。如下图，，而雪花算法生成的id位数则是19位的，所以当前端使用number类型去接收后端生成的19位id时，末尾三位数字不管是什么，都会变成0。解决方法也很简单，就是用可以容纳19位数的类型去接收和使用，比如字符串，本人在后端使用雪花算法生成的id也是字符串类型，主键非空唯一即可，需求千千万，奇葩也很多，若是真有需要非数字的id，字符串也是可以满足的，而且字符串的方法和工具类不比integer少，使用起来反而更加高效。
后端使用Long类型的id 前端接受参数时因为精度不够而后三位全为0的解决方案
最新发布
g05172002的博客
03-12 292
解决前端精度缺失问题
vue开发之----后端过来的数据丢失精度问题后几位00
山鬼谣弋痕夕的博客
06-16 4049
后端过来的数据丢失精度问题后几位00？怎么就不一样了呢？
后端传给前端后几位数字变为0问题
程序员Forlan的博客
08-02 2472
问题描述 当后端为Long类型的数字传给前端，在Postman里面是正常的，但前端页面取到的后几位数字变为了0 分析 Javascript的Number 类型最大长度是17位 Java的long类型长度是19位 解决方法 Java后台使用String类型替换Long类型 使用 @JsonSerialize(using = ToStringSerializer.class) 注解 import com.fasterxml.jackson.databind.annotation.JsonS
关于使用雪花算法id，序列化回前端，后位变成0精度丢失的解决方法
m0_49194578的博客
07-17 3057
由于id使用了雪花算法生成的long 今天在使id传回前端时发现，id后几位都变成了0，也就是发生了精度的损失； 查询了相关的文档以后发现，雪花算法生成的id长度有19位，而json在序列化中会将数字类型转换为16位，这样后面的精度就丢失了。默认进行了四舍五入； 所以有如下几种解决方案； 1，所有id使用String类型，弊端是字符做id查询效率比较低， 2，是使用配置类，改变序列化过程 package com.akveo.bundlejava.config; import com.fasterxml.j
后台返回的数据超过16位后面变为0的解决方案
m0_46365130的博客
05-18 1210
安装JSONBig 插件 import JSONBig from 'json-bigint' const service = axios.create({ baseURL: base_url, // api 的 base_url timeout: 15000, // request timeout transformResponse: [function (data) { try { return JSONBig.parse(data) } catch (err)
动态路由前端控制或是后端控制
m0_37714008的博客
01-06 1270
为什么设置动态路由 我们在开发的过程中，会有不同的人来操作系统，有admin（管理员）、superAdmin(超管)，还会有各种操作员、普通管理员。为了区别这些人员，我们会给不同的人分配不一样的角色，从而来展示不同的菜单，这个就必须要通过动态路由来实现。 前端控制 1、不用后端帮助，路由表维护在前端 2、逻辑相对比较简单，比较容易上手 后端控制 1、相对更安全一点 2、路由表维护在数据库 一、前端控制 通过路由的meta属性role来控制加载路由 具体方法是： 1、根据登录用户...
Java后端常见场景业务问题
weixin_43739821的博客
04-09 1821
单点登录如何实现 权限认证如何实现 上传数据的安全性如何保证 项目日志如何采集 已经上线的bug如何排查 如何快速定位系统瓶颈
问题：前端获取long型数值精度丢失，后面几位都为0
虎康的博客
03-08 1794
该字段类型是long类型问题：前端接收到数据后，发现精度丢失，当返回的结果超过17位的时候，后面的全部变成0！超出精度部分全部变成了00。第二种办法：使用工具进行转化把 long 型改为String类型，这种方法可以实现全局转化（推荐）第一种办法：在后台把 long型改为String类型，但是代价有点大，只要涉及到的地方都需要改。通过接口获取到的数据和 Postman 获取到的数据不一样，仔细看 data 的第17位之后。第三种办法：前端进行处理（目前没有很好的办法，不推荐）或者 用这个UUID。
【JavaScript】超过16位的数字，后面的数字全为0
leader_li的博客
04-08 467
LeetCode【加1】题目、Number类型的数字超过16位，后面的数字全为0。
Vue处理超过16位数字精度丢失问题（数字最后两位变0）
钢铁之家
04-21 1509
Vue处理超过16位数字精度丢失问题（数字最后两位变0）
后端id设置long类型时，传到前端，超过19位最后两位为00
浩星
06-22 6417
后台传入的雪花id在前端被截断,id超过19位最后两位为00
js接收数字，最后几位数字变成了0
weixin_43751710的博客
05-05 9250
遇到一个问题： js接收数字，最后几位数字变成了0 从Java后台传一个数值到前端的js中，Java中输出为97761478957858935， 但在js中输出便成了97761478957858930 最后一位竟然都变成了0 原来是js数字最长为16位，97761478957858935是17位，所以最后一位自动变为了0 解决方法也很简单，只要在Java后台传数值时，将其变为String类型的即可...
后端ID传到前端时被截断，末尾变成000的解决方法
qq_41273599的博客
01-05 1469
文章目录一、问题原因二、解决方案三、 延伸探究为什么avaScript中的Number取值范围是-2^53 到2^53-1？ 一、问题原因 Java中Long的取值范围为-9223372036854775808到9223372036854775807（即-2^64“ 到”2^64-1） 而JavaScript中的Number取值范围为-9007199254740992 到9007199254740991 （即-2^53 到2^53-1） 二、解决方案 在传的时候把Long转换成String类型 使用spr
解决后端ID传到前端时被截断，末尾显示00
丢丢的博客
05-08 839
解决后端ID传到前端时被截断，末尾显示00解决办法
bigint对应Long类型返回给前端,精度丢失问题
weixin_43608796的博客
12-17 1173
在Bean字段上添加注解@JsonSerialize(using= ToStringSerializer.class) import com.fasterxml.jackson.databind.annotation.JsonSerialize; import com.fasterxml.jackson.databind.ser.std.ToStringSerializer; @JsonSerialize(using= ToStringSerializer.class) private Long id; .
axios请求返回精度问题
03-02
<think>嗯，用户问的是关于axios请求返回的精度问题。首先，我需要回忆一下以前处理类似问题的经验。通常，这类问题出现在处理大数字或者高精度小数的时候，比如后端返回的Long类型数据在JavaScript中可能会因为精度丢失而导致前端显示错误。例如，数据库中的18位ID到了前端可能后面几位变成0。 接下来，我要考虑axios本身是否有什么设置会导致这个问题。不过axios主要是负责发送HTTP请求和接收响应，数据解析可能依赖于浏览器的内置JSON解析，或者Node.js的JSON.parse方法。所以问题可能出在JSON解析的过程中，JavaScript的Number类型无法精确表示过大的整数，导致精度丢失。 然后，用户可能的场景是什么呢？比如，他们可能在处理订单号、用户ID等长数字时遇到了问题。这时候，后端返回的数据可能以字符串形式传输会更合适，避免JSON解析时的精度丢失。所以解决方法可能包括让后端将字段改为字符串，或者前端使用JSON-bigint之类的库来处理大数字。 另外，可能需要检查响应头的Content-Type是否正确，确保数据被正确解析。如果后端返回的是字符串，但前端误解析为数字，也可能导致问题。还有，如果涉及小数计算，比如货币，可能需要使用专门的库如decimal.js来保持精度。 总结一下，可能的解决方案有几个方向：修改后端返回数据类型为字符串，前端使用特殊库处理大数字，或者调整前后端的数据处理方式。同时，要提醒用户在遇到精度问题时，先检查数据在传输过程中是否被意外转换，使用开发者工具查看原始响应内容，以确定问题发生的环节。</think>关于 Axios 请求返回的 **数值精度丢失问题**，这里为您梳理关键要点和解决方案： --- ### 🚨 **问题现象** 当接口返回 **Long 型数值**（如 `18位订单ID`）时，前端可能得到错误值： ```js // 原始数据 { "id": 123456789012345678 } // 实际接收结果（后三位变0） { "id": 123456789012345000 } ``` --- ### 🔍 **问题根源** 1. **JavaScript 数值精度限制** - JS 的 `Number` 类型最大安全整数为 `2^53 - 1`（即 `9007199254740991`） - 超出该范围的整数在 JSON 解析时会出现精度丢失 2. **Axios 的默认处理** - Axios 使用浏览器内置的 `JSON.parse()` 解析响应数据 - `JSON.parse()` 自动将数字转为 JS 的 `Number` 类型 --- ### 💡 **解决方案** #### 方案 1：后端返回字符串格式（推荐） 让后端将 Long 类型字段改为 **字符串格式** 返回： ```json { "id": "123456789012345678" } ``` #### 方案 2：前端自定义 JSON 解析 使用 `json-bigint` 库处理大整数： ```bash npm install json-bigint ``` ```js import JSONBig from 'json-bigint'; axios.get('/api/data', { transformResponse: [data => JSONBig.parse(data)] }) ``` #### 方案 3：特殊场景处理 若必须使用数字类型，可添加 **精度补偿逻辑**： ```js axios.get('/api/data').then(response => { const rawData = response.request.responseText; // 获取原始响应文本 const id = rawData.match(/"id":(\d+)/)[1]; // 用正则提取原始值 }); ``` --- ### ⚠️ **注意事项** - 使用 `json-bigint` 时，大数字会转换为 `BigNumber` 对象，需调用 `.toString()` 使用 - 小数精度问题可使用 `decimal.js` 库处理 - 确保服务器响应头包含 `Content-Type: application/json` --- ### 🔧 **调试建议** 1. 打开浏览器开发者工具，查看 **Network 原始响应** 2. 对比原始响应与 JS 解析后的数据差异 3. 使用 `typeof` 检查数值类型是否为 `string`/`number` 通过以上方法，可以有效解决因 JavaScript 数值精度限制导致的 Axios 返回值异常问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值