vue前端处理后台返回的Long型数据精度丢失

article/2025/11/11 2:54:03

vue前端处理后台返回的Long型数据精度丢失

问题描述

开发时后端返回的id为Long型，结果发现俩id怎么会一样呢？如下图是控制台Preview返回的数据
在这里插入图片描述

正以为是后端那边数据有误时，我点开Response发现这边的id是正常的…
Preview和Response的数据居然不一样
哎呀我去…这不是搞事情么
在这里插入图片描述
于是通过面向百度的学习方式，了解到，js对于超出17位的Long型数据会出现精度丢失的问题。
有问题我们就要解决

解决办法

方法1：简单粗暴，手里拿着板砖和蔼的要求后端不要返回Long，返回String类型。这样就解决了。

如果后端不妥协不屈服那怎么办呢？那我们只能自己动手，不求人
方法2：让我们前端自己支持Long型数据，具体如下

第一步:下载依赖

npm install jison -g

-g 不能省，实测没有-g会有问题

第二步:去gitHub下载俩文件，放到本地项目文件夹

下载地址
如果gitHub打不开，参考解决github打不开的问题
在这里插入图片描述
打开 jsonlint.y 修改词法文件关于JSONNumber的这段代码：

JSONNumber: NUMBER{$$ = yytext == String(Number(yytext))? Number(yytext): yytext;};

第三步:使用jison生成 jsonlint.js

在终端执行代码。注意要进到下载的俩文件的文件夹

jison jsonlint.y jsonlint.l

然后就会得到jsonlint.js
在这里插入图片描述

第四步:引入 jsonlint.js

在 index.html 中引入

<script src="./jsonlint.js"></script>

在这里插入图片描述

第五步:request拦截并修改获得的参数

打开request.js
添加如下代码

// `transformResponse` 在传递给 then/catch 前，允许修改响应数据---使前端支持超长Long型数据，将Long转为了字符串
transformResponse: [function (data) {/* eslint-disable no-undef */return jsonlint.parse(data)
}]

在这里插入图片描述
之后我们启动项目，发送请求一看Preview和Response的数据和之前一样啊？怎么回事？别慌…
我们看看console里打印的参数呢？

是的！没错！变成了string，且id正确，成功了！