资讯专栏INFORMATION COLUMN

项目中JavaScript 中最大的安全整数

894974231 / 2610人阅读

摘要:什么是最大安全整数是一个值为的常量。因为的数字存储使用了中规定的双精度浮点数数据类型,而这一数据类型能够安全存储到之间的数值包含边界值。

什么是最大安全整数?
MAX_SAFE_INTEGER 是一个值为 9007199254740991的常量。因为Javascript的数字存储使用了IEEE 754中规定的双精度浮点数数据类型,而这一数据类型能够安全存储 -(253 - 1) 到 253 - 1 之间的数值(包含边界值)。--- MDN WEB DOCS
在项目会导致什么错误?

在代码中输出比MAX_SAFE_INTEGER大的Number值

console.log(9007199254740999) // 9007199254741000
console.log(9007199254740993) // 9007199254740992

在代码中比较超出安全存储的数值,可能会存在下列情况

9007199254740993 === 9007199254740992 // true
实际项目中碰到的问题

在进行vue 项目开发的时候,通过axios进行前后端数据交互

后端在定义某些数据时将数据的ID 设置为比MAX_SAFE_INTEGER大的int类型

而我取到后也没有注意到这一情况,在修改某一条数据时,是通过传回数据ID进行数据定位的。

然后问题就出现了。。。。

数据死活修改不了,后端返回无这条数据,调试了半天,

然后通过对比preview 和 response 中的数据发现了两者数据不一致

如何解决?

第一个想法是在axios的拦截器中做处理,将数字类型转换为字符串

9007199254740993  => "9007199254740993"

但经过尝试后发现axios拦截器中的数据本身就是错误了。

然后就用了原生的fetch 做处理

export function getData(data) {
  const promise = new Promise(function (resolve, reject) {
    const headers = new Headers()
    headers.append("Content-Type", "application/json")
    const config = { method: "POST", headers, body: JSON.stringify(data) }
    fetch("api/url", config).then(res => res.text()).then(text => {
      function numberToString (match) {
        return `:"${match.substring(1, match.length - 1)}",`
      }
      const responseJson = JSON.parse(text.replace(/:d{15,100},/g, numberToString))
      resolve(responseJson)
    })
  })
  return promise
}

但问题是这个只解决了一个api 的问题,然后每个都这样写,太烦了。
而且fetch 并没有axios中的拦截器,不能统一处理异常

所有便想要自己封装一个fetch通过模仿axios 那样设置拦截器之类的功能。。。。。。

然后就没有然后了,感觉封装一个目前需要的fetch会花个半天到一天的时间。
而且又快下班了,所以就去看axios文档了。
发现axios文档中已经有这样一个回调函数,能解决这个问题

 // `transformResponse` allows changes to the response data to be made before
  // it is passed to then/catch
  transformResponse: [function (data) {
    // Do whatever you want to transform the data

    return data;
  }],

这个不看文档的坏习惯,浪费了大半天时间

最后代码

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
  timeout: 5*1000, // request timeout
  transformResponse: [function (data) {
    function numberToString (match) {
      return `:"${match.substring(1, match.length - 1)}",`
    }
    if (isJSON(data)) {
      const responseJson = JSON.parse(data.replace(/:d{15,100},/g, numberToString))
      return responseJson
    } else {
      return data
    }
  }]
})
总结

第一,我这个数据是json类型的的所以在取到原始数据就是字符串,其实是对字符串进行处理

第二,最后的方案不是最优的,应为这个会处理每一条数据,不管那条数据中有没有超出范围的数字

第三,能想到的比较好的方案是和后端对接时问清楚那些是超出的,然后将这两种情况区分开来,再使用不同的axios 封装

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109893.html

相关文章

  • JS如何理解浮点数?

    摘要:本文通过介绍的二进制存储标准来理解浮点数运算精度问题,和理解对象的等属性值是如何取值的,最后介绍了一些常用的浮点数精度运算解决方案。浮点数精度运算解决方案关于浮点数运算精度丢失的问题,不同场景可以有不同的解决方案。 本文由云+社区发表 相信大家在平常的 JavaScript 开发中,都有遇到过浮点数运算精度误差的问题,比如 console.log(0.1+0.2===0.3)// fa...

    bang590 评论0 收藏0
  • 你不知道JavaScript卷 第一、二章

    摘要:表达式没有返回值,因此返回结果是。并不改变表达式的结果,只要让表达式不返回值按惯例我们用来获得这主要源自语言,当然使用或其他表达式也是可以的。不是数字的数字如果数学运算的操作数不是数字类型,就无法返回一个有效的数字,这种情况下返回值为。 这里的内容是读书笔记,仅供自己学习所用,有欠缺的地方欢迎留言提示。 第一部分 类型和语法 第1章 类型ECMAScript语言类型包括Undefin...

    levy9527 评论0 收藏0
  • 探寻 JavaScript 精度问题以及解决方案

    摘要:推导为何等于在中所有数值都以标准的双精度浮点数进行存储的。先来了解下标准下的双精度浮点数。精度位总共是,因为用科学计数法表示,所以首位固定的就没有占用空间。验证完成的最大安全数是如何来的根据双精度浮点数的构成,精度位数是。 阅读完本文可以了解到 0.1 + 0.2 为什么等于 0.30000000000000004 以及 JavaScript 中最大安全数是如何来的。 十进制小数转为二...

    YanceyOfficial 评论0 收藏0
  • 【重温基础】6.数字

    摘要:本文是重温基础系列文章的第六篇。以指定的精度返回该数值对象的字符串表示,可接收一个参数,用来指定有效数个数的整数。 本文是 重温基础 系列文章的第六篇。今日感受:自己需要多总结,会有不同收获(比如今晚我做的转正总结)。 系列目录: 【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理) 【重温基础】1.语法和数据类型 【重温基础】2.流程控制和错误处理 【重温基础】3.循环和...

    terro 评论0 收藏0
  • 一个函数让你看懂 'Why 0.1+0.2!=0.3'

    摘要:的二进制科学计数法第位是,所以就有了下面的结果有着同样的问题,其实正是由于这样的存储,在这里有了精度丢失,导致了。最大安全数字中表示最大安全数字计算结果是,即在这个数范围内不会出现精度丢失小数除外这个数实际上是。是一个任意精度的整数。 话不多说,先上代码 function judgeFloat(n, m) { const binaryN = n.toString(2...

    mushang 评论0 收藏0

发表评论

0条评论

894974231

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<