[交互问题]axios交互的数值精度丢失问题

axios是用于前后端交互的插件,但是当传递的数值长度过长时会导致数值的精度丢失

问题描述

axios获取的数据中有超过16位的数字 ,精度会丢失,后面的数据会变为0,确切的说17位的时候,有时数据出现问题,有时没有

类型
Number.MAX_SAFE_INTEGERMath.power(2,53)-1=9007199254740991,
Number.MAX_VALUE1.7976931348623157 x 10308
Number.MIN_SAFE_INTEGER-(253 - 1),
Number.MIN_VALUE5 x 10-324 = 5e-324

Axios 交互可以接收的最大长度Number.MAX_SAFE_INTEGER

但是真实情况是16位的时候《=9999999999999998,无精度问题,9999999999999999就会存在精度问题变成10000000000000000

解决方案

包括:

  • 改变传递的类型
  • 转换为字符串

改变传递的类型

该方式主要是服务端返回的数据类型直接转变为string类型,因为该方式可能涉及到数据库对应字段的类型,如果该方式不方便,可采用第二种方式,前端直接对接收到的数据类型做处理

转换为字符串

import jsonBig from 'json-bigint'
[{itemId:9999999999999988,itemName:'testone'}]
axios.get(Api.path, { params: param,transformResponse: [function (data) {
                // 对 data 进行任意转换处理
                try {// 如果转换成功则返回转换的数据结果
                    let temp=jsonBig.parse(data)
                    let list=temp.data.list
                    if(null!=list && undefined!=list){
                        list.map((item,index)=>{
                            if(null!=item.itemId && undefined!=item.itemId){
                                item.itemId=item.itemId.toString();//转换为string类型
                            }
                            return item;
                        })
                    }
                    return temp
                  } catch (err) {
                    return {// 如果转换失败,则包装为统一数据格式并返回
                      data
                    }
                  }
              }] }).then((res: any) => {
		//.......
            }).catch(e => {
		//.......
            });
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
除了axios之外,还有其他一些常用的前后端数据交互方式。其中,使用Fetch API也是一种常见的选择。Fetch API是浏览器内置的一种用于进行网络请求的接口,它提供了更简洁的语法和更强大的功能。与axios相比,Fetch API的优点包括更轻量级、更现代化的设计以及更好的浏览器兼容性。另外,还有传统的XMLHttpRequest对象也可以用于前后端数据交互。XMLHttpRequest是JavaScript中的一个内置对象,通过它可以发送HTTP请求并获取响应。尽管XMLHttpRequest的用法相对较复杂,但它仍然是许多旧版浏览器中广泛使用的一种前后端数据交互方式。所以,除了axios,你还可以选择使用Fetch API或XMLHttpRequest来实现前后端数据交互。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue+SpringBoot前后端分离教程四:前后端数据交互Axios](https://blog.csdn.net/Q1368089323/article/details/124520138)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [HTML使用极简的方式通过ajax请求实现前后端交互代码实现](https://download.csdn.net/download/LieYingZhiYan/12530387)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三知之灵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值