前后端联调时JS数据精度问题的解决

在JavaScript中,Number类型范围 -2^53 + 1 到 2^53 - 1,而在Java中Long类型的取值范围是 -2^63 + 12^63 - 1, 比JavaScript中大很多,所以后端能正常处理。

其实 ES6 引入了 Number.MAX_SAFE_INTEGER 和 Number.MIN_SAFE_INTEGER 这两个常量,用来表示这个范围的上下限。

Number.isSafeInteger()用来判断一个整数是否落在这个范围之内,如果超出JS的Number范围的,看到的输出可能会有精度丢失问题的。

解决方案:
  1. 后端解决:后端直接给前端返回字符串,不要返回Number类型的数字
  2. 前端解决:

方案一: 正则

 如果我们使用的是axios请求数据,Axios 提供了自定义处理原始后端返回数据的 API:transformResponse , 可以这样处理:

axios({  
method: method,  
url: url,  
data: data,  
transformResponse: [function (data) {  
    // 将Long类型数据转换为字符串
    const convertedJsonString = data.replace(/"(\w+)":(\d{15,})/g, '"$1":"$2"'); 
    return JSON.parse(convertedJsonString);  
}],  
})


// 假设后端返回的JSON数据如下:
const responseData = {
  id: 12345678901234567890, // 这是一个Long类型数据
  name: "John Doe"
};

// 处理过的json数据
console.log(responseData.id); // 这将输出字符串:"12345678901234567890"
console.log(typeof responseData.id); // 这将输出 "string"

 方案二:借助json-bigint这个第三方包,进行json序列化

 import JSONbig from "json-bigint";
    axios({  
    method: method,  
    url: url,  
    data: data,  
    transformResponse: [function (data) {  
+        const JSONbigToString = JSONbig({ storeAsString: true });
+          // 将Long类型数据转换为字符串
+          return JSONbigToString.parse(data);  
    }],  
    })
    
    
    // 假设后端返回的JSON数据如下:
    const responseData = {
      id: 12345678901234567890, // 这是一个Long类型数据
      name: "John Doe"
    };
    
    // 处理过的json数据
    console.log(responseData.id); // 这将输出字符串:"12345678901234567890"
    console.log(typeof responseData.id); // 这将输出 "string"

强烈推荐公众号:程序员成长指北,我担心文章会删除或者不好找,所以在自己博客copy了一份,见谅哈,因为我之前也遇到过这个问题,当时是后端将返回参数改成了字符串,发现原来前端也有解决方案。不过,如果后端入参限制了必须传Number类型的id的话,也还是不行,所以还是后端改起来更方便。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/152444.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【wvp+ GiVideoCall】 三种主要应用场景

目录 点播场景 聊天室场景 双人视频 点播场景 主动对象: 视频调度平台。 被点播对象: 登录平台的web用户,android用户;国标设备。 功能: 视频点播;伴音;对讲;录相; 聊…

RabbitMQ 安装及配置

前言 当你准备构建一个分布式系统、微服务架构或者需要处理大量异步消息的应用程序时,消息队列就成为了一个不可或缺的组件。而RabbitMQ作为一个功能强大的开源消息代理软件,提供了可靠的消息传递机制和灵活的集成能力,因此备受开发人员和系…

基于Springboot的非物质文化网站(有报告)。Javaee项目,springboot项目。

演示视频: 基于Springboot的非物质文化网站(有报告)。Javaee项目,springboot项目。 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 项目介…

耿明雨出席柬方70周年招待会晚宴

11月9日,庆祝柬埔寨独立和建军70周年欢迎晚宴上,全国政协副主席沈跃跃盛邀出席,此次招待会是由柬埔寨王国驻华大使馆主办,在北京励骏酒店圆满召开,晚宴现场;凯西索达大使致辞、中国外交部部长助理徐飞洪等领…

亓长东、王喜成莅临科大讯飞,共谋科技与服装行业的深度融合

近日,国务院发展研究中心研究员、经济学博士亓长东,雷蒙服饰有限公司董事长王喜成一行莅临科大讯飞进行调研。科大讯飞副总裁张友国热情陪同,双方就科技与服装行业的深度融合进行了深入交流。 在科大讯飞副总裁张友国的陪同下,亓长…

解决Qt5.13.0无MySQL驱动问题

一、前言 由于Qt5.12.3是最后提供mysql数据库插件的版本,往后的版本需要自行编译对应的mysql数据库插件,官方安装包不再提供。使用高版本的Qt就需要自行编译mysql驱动。 若没有编译在QT中调用Qsqldatabase库连接mysql时,提示出现如下问题&a…

Windows系统下使用tar命令,压缩文件与解压缩文件并指定路径

如果想指定解压缩后的文件夹,请看第三步 第一步:进入解压文件所在的当前文件夹内右键点击在终端打开 如下图 第二步:在终端内输入命令行(分为两种情况) 此步骤分为两种情况 2.1 情况一{文件后缀为.tar.gz} ## x…

VirtualKD-Redux 双机调试内驱驱动

官网使用说明 官网下载地址 简单的说 1. 如果是64位虚拟机,把target64文件夹拷贝到虚拟机中,然后安装vminstall.exe 2. 我电脑是用windbg prview, 在主机上打开 vmmon64.exe 3 设置DbgX.Shell.exe路径 D:\安装\WinDbg Preview1.1910.3003.0\Microsoft…

C++进阶-STL 常用算法列举

STL 常用算法列举 概述常用遍历算法for_each 遍历容器transfrom 搬运容器到另一个容器中 常用查找函数find 查找元素find_if 按条件查找元素adjacent_find 查找相邻重复元素binary_search 二分查找法count 统计元素个数count_if 按条件统计元素个数 常用排序算法sort 对元素内内…

Java获取Jar、War包路径,并生成可编辑修改的本地配置文件

前言 本地的可修改配置文件的编写理应是一个很常用的功能,但由于数据库的存在,它鲜少被提及,大多数我们直接存储到数据库中了。 以至于现今,除了没接触数据库的新手时常使用它以外,它没有太多的出场机会。 也因此&am…

第九章认识Express模板

基本概述 Express模板是指Express框架中用于渲染视图的文件,可以包含HTML、CSS、JavaScript等内容,用于构建Web应用程序的用户界面。 使用Express模板可以快速、方便地创建Web应用程序,并且可以轻松地将动态数据注入到模板中,以…

印染污水处理设备有哪些分类

印染污水处理设备有多种分类方法。根据处理方法,可以分为物理法、化学法、生物法等。 物理法处理设备主要包括格栅、沉淀池、过滤器等,利用物理分离、去除的原理,将污水中的悬浮物和沉淀物去除。化学法处理设备主要包括混凝和氧化等&#xf…

Abaqus 2023有哪些新功能?

Fe-safe/Isight/Tosca2022新功能 近日,达索3ds官网发布了Abaqus 2023的最新消息,在接下来的数周内,SIMULIA套件GA版将正式与大家见面。 据悉,Abaqus 2023整合了该级别的最新功能和上一个级别的前四个补丁版的新增/增强功能&#…

安防监控展示预约小程序的作用如何

监控在生活中的用途非常广泛,普遍应用于小区门户、商业大厦、产业基地、家庭、汽车等场景中,市场需求较大,同时随着科技发展,安防监控产品更新迭代也比较快,衍生出的经销店、安装技术工等产业近些年也比较火。 安防监…

Elasticsearch搜索分析引擎本地部署与远程访问

文章目录 系统环境1. Windows 安装Elasticsearch2. 本地访问Elasticsearch3. Windows 安装 Cpolar4. 创建Elasticsearch公网访问地址5. 远程访问Elasticsearch6. 设置固定二级子域名 Elasticsearch是一个基于Lucene库的分布式搜索和分析引擎,它提供了一个分布式、多…

中移链共识机制介绍

01 为什么需要共识 共识是对某事达成的共同看法,它是区块链的灵魂,对确保区块链的完整性和安全性起着至关重要的作用。在传统的集中式系统中,单个实体或一组实体有权验证和记录交易。然而,区块链中的一个核心概念是去中心化&…

LeetCode - 160. 相交链表(C语言,配图)

思路: 1. 我们算出两个链表的长度lenA,lenB。我们在这里最后判断一下,两个链表的尾节点是否是一样的,如果是相交链表,那它们的尾节点一定是一样的。 2. 算出长链表和短链表的差距n(n | lenA- lenB |&#…

年产200万件的超级工厂投产!巨头「闭环」汽车电子全产业链

随着汽车电动化程度的提升,汽车电子部件占整车成本比重逐步升高,已经从2012年的25%上升到2021年的55%。 且汽车电子电气架构向整车集中演进,智能汽车已经进入了软件及数据定义时代,底层硬件打破了过去几十年围绕特定应用不断增加…

MySQL5.7和MySQL8对比分析

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏: MySQL学习 ✨特色专栏: My…

使用CycleGAN训练自己的数据集

一、下载源码 源码下载链接:https://github.com/junyanz/pytorch-CycleGAN-and-pix2pix 二、调整自己的数据集格式 按照如下格式放 三、安装好所需要的python包 使用命令:pip install 包名称 在anaconda里面安装, 四、训练和测试 在开始训…