axios请求，后端返回long型数据，前端获取精度缺失问题

最新推荐文章于 2024-05-11 16:23:04 发布
最新推荐文章于 2024-05-11 16:23:04 发布
阅读量1.9k 收藏 2
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WZT1faker/article/details/108514332
版权
本文讨论了在使用axios进行HTTP请求时，遇到后端返回Long类型数据，前端JavaScript处理时出现精度丢失的问题。文章通过分析axios源码，提供了修改默认配置以解决精度问题的方法。
摘要由CSDN通过智能技术生成

node_modules/axios/lib/default.js
找到transformResponse 将其内容改为

transformResponse: [function transformResponse(data) {
   
    /*eslint no-param-reassign:0*/
    if (typeof data === 'string') {
   
      try {
   
        data =
最低0.47元/天 解锁文章
js使我快乐
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于Ajax接收 后台返回的 Long类型数据的处理思路
09-07 983
场景重现： 最近在开发 狐小E智慧办公 项目时，写ajax时遇到一个小坑，之前都是做后端开发，对前端js代码没有深入了解，只是会使用相关函数，当开发某个功能时，列表已经开发完成，点击列表跳转详情时老是报找不到数据错误，调试后发现每次后端返回的列表里有id，而查详情时，也是带着id,但是在数据库却无法查到。最终仔细对比发现后端返回列表的id和ajax里接收的id不一致。id返回到前端后已经不是正确的值了。发现只要后端返回的是long 类型的值 就会一定机率出现前端的值与后端接收的不一致的情况。 问题产生原因:
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
10-16
总结来说，处理Vue中axios连续请求导致的返回数据混乱问题，可以采取与后端优化接口、使用Promise.all来控制请求顺序以及利用axios的CancelToken来取消不必要的请求。通过这些方法，我们可以有效地维护数据的一致性...
使用axios请求，前端数字long类型精度问题解决方法
12程序猿的博客
02-06 905
使用axios请求，前端数字long类型精度问题解决方法
axios解决后端传来的id太长导致精度丢失（超过16位的数字会变成0000）的问题
最新发布
qq_68155756的博客
05-11 964
办法一：让后端把id传成字符串类型； 办法二：用jsonBig转换为bigInt数字类型： 1.在项目根目录打开命令行输入命令安装jsonBig插件： 2.在封装的请求中使用插件，核心是在创建sxios实例的时候假如transformResponse这个配置项，可以拦截接口返回的内容进行处理(因为默认会使用JSON.parse()解析从后端的来的数据)，再用json-bigint插件把长类型数字解析成字符串，解析失败就代表没有长数字可解析，使用JSON.parse()解析
后端Long类型传到前端精度丢失的问题
weixin_49203377的博客
03-15 1077
后端Long类型传到前端精度丢失的问题
前端对于Long型数据的精度丢失问题
qq_39355504的博客
08-04 332
问题描述： 数据库：字段类型为bigint（64） javaBean：Long类型 前端：获取到的数据和数据库中的数据不一致 经查阅得知： js的number类型最大长度为17位 mysql使用bigint类型长度为20位 因此，数据传递到了前端出现了精度丢失问题 解决办法： 1.从底层数据库改起，把字段类型改成varchar类型 2.在javabean对应字段的上面加上注解 @JsonSerialize( using = ToStringSerializer.class;
后端传递json数据给前端，出现数据丢失问题。
Java成长故事
12-11 9062
前后端分离，前端VUE，后端JAVA，采用SSM框架。做的是数据可视化。 后端传递json数据给前端，具体格式如下： 前端获取到的数据总是丢失一个属性，如下所示： flag字段丢失。 经过检查后，发现定义的Result类中没有添加flag的set和get方法。因此jackson无法将Result对象转换为json对象。因为它的转换时基于属性的set和get方法的。 ...
解决axios post 后端无法接收数据的问题
10-16
在开发Web应用时，前端与后端的数据交互是至关重要的，而使用axios库进行POST请求时，有时会遇到后端无法接收到发送的数据的问题。这个问题通常由多种原因引起，但最常见的原因是数据格式不正确或者跨域策略未配置好...
vue中后端做Excel导出功能返回数据流前端的处理操作
10-14
在Vue项目中，当后端实现Excel导出功能并返回数据流时，前端需要进行相应的处理以将数据转化为可下载的Excel文件。本篇将详细解释这个过程。 首先，后端通常会通过HTTP响应返回一个Blob对象，Blob是Binary Large ...
前端如何解决long型在js中精度丢失的问题
WANG_AFei的博客
03-22 3939
原因：js特性不支持16位以上的数值，超过16位以上的数字会进行四舍五入 example: 12345678901234567123 会被解析成12345678901234567000 前端在项目中遇到这种问题，最好让后端在接口返回数据时直接将long型转成string。那后端不给处理且对你进行实力嘲讽，怎么办。不扯了，说说解决办法。 在response中拿到的数据是正确的，这时是一个字符串，但是...
解决JS无法处理后台返回的Long型数据精度丢失问题
weixin_52727357的博客
01-20 924
解决JS无法处理后台返回的Long型数据精度丢失问题
使用MyBatisPlus雪花ID导致前端axios接受到的整数丢失精度
BPDBSIR的博客
08-13 756
一、问题分析 我们在日常开发中如果后端返回给我们一个很长的整型，例如：1425452686578319362 我们在前端接受到的结果可能如下： 1425452686578319400 这是因为后端定义的long长整型字段长度超过17位返回到前端，前端得到的数据精度丢失 二、解决方式 后端将Long类型改为String 让前端支持此长度的整数 很显然后者更符合我们的需求 三、问题解决 1、安装npm依赖包 npm i json-bigint 2、配合axios使用 这里只讲解和axios搭配使用的方法
【避坑】解决后端返回Long类型的数据前端精度丢失问题
小学弟的博客
06-14 2275
今天又遇到了后端返回的某个字段的数字太长，JS精度丢失了，导致前端展示的时候数字变成了科学计数法，有些甚至直接展示错误！
获取axios返回的值
伟绍博客
03-19 1万+
1.拷贝axios官网get案例，想获取接口数据在前台，结果出不来，官网代码如下 // 上面的请求也可以这样做 axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); // 前台调试能够看到获取到数据了 let value = response.data.success; // 获取数据放到前台 }) .ca
前端使用GET请求时，参数或数据丢失
xixiGirlLiu的博客
02-01 2679
最后发现参数没有传过去是因为请求参数中有一个参数的value值是有问题的，而使用get请求时，参数会拼接在url上。有问题的参数是collection_address的value值有一个#号，这就是问题所在。并且拼接在collection_address后面的参数都没了，正常我应该是这样的。是因为当参数中存在#，会自动将#及后面的内容都拦截，所以#后面所有的东西都丢失了。当我发起get请求时，我的参数就变成了这样，会发现，64之后所有的字符都不见了。
axios拿取后端数据，数据中可能会有数字比较庞大的，js转换会出问题
qq_42227041的博客
08-16 4363
使用 https://www.npmjs.com/package/json-bigint   bigint可以转换数字 使用方法： npm i json-bigint   直接下载 然后  import JSONbig from 'json-bigint' 引入  最后在aixos的设置里面的transformResponse属性中转换 transformResponse属性是axio...
【解决方案】jison解决JS处理后台返回的Long型数据精度丢失
Kuroko's Development Notes
09-20 1万+
问题描述： 这是一个经典的js连个long类型都搞不定的问题，网上很多暴露该问题的解决方案大都是让后端把该字段改为string类型。 比如我之前也是这样做的：【问题记录】控制台解析preview和response数据不一致→解决JS处理后台返回的Long型数据精度丢失 没过多久，在网上看到了另一种稀有的处理方式——jison，号称“bison in javascript”，意思是js的一头野...
彻底解决JS处理Long类型精度丢失问题（一）
热门推荐
陌上花开，可缓缓归矣
01-20 6万+
对于Long类型的数据，如果我们在Controller层将结果序列化为json，直接传给前端的话，在Long长度大于17位时会出现精度丢失的问题。如何避免精度丢失呢？最常用的办法就是将Long类型字段统一转成String类型。 JS 数字丢失精度的原因 计算机的二进制实现和位数限制有些数无法有限表示。就像一些无理数不能有限表示，如 圆周率 3.1415926…，1.3333… 等。JS 遵循 IE...
axios请求后端拿到json数据后，在html使用这个数组
05-28
好的，你可以按照以下步骤在 HTML 中使用从后端获取的 JSON 数据数组： 1. 在 HTML 页面中使用 `<script>` 标签引入 Axios 库，如下所示： ```html <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> ``` 2. 使用 Axios 发送 GET 请求，获取后端返回的 JSON 数据数组： ```javascript axios.get('your-backend-api-url') .then(response => { const data = response.data; // 获取后端返回的 JSON 数据数组 // 在这里处理数据，例如将数据渲染到页面上 }) .catch(error => { console.error(error); // 处理错误 }); ``` 3. 在 `then` 回调函数中处理获取到的 JSON 数据数组，例如将数据渲染到页面上： ```javascript axios.get('your-backend-api-url') .then(response => { const data = response.data; // 获取后端返回的 JSON 数据数组 // 在这里处理数据，例如将数据渲染到页面上 const ul = document.createElement('ul'); // 创建一个 <ul> 元素 data.forEach(item => { const li = document.createElement('li'); // 创建一个 <li> 元素 li.textContent = item.text; // 设置 <li> 元素的文本内容 ul.appendChild(li); // 将 <li> 元素添加到 <ul> 元素中 }); document.body.appendChild(ul); // 将 <ul> 元素添加到页面中 }) .catch(error => { console.error(error); // 处理错误 }); ``` 这样，你就可以在 HTML 页面中使用从后端获取的 JSON 数据数组了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值