大数的理解: 就是由于数字太大了,然后js解析不了,不认识. 就比如实际生活中,在双11的时候,我们知道淘宝一夜之间总购买量肯定是一个很大很大的金额,当我们前端碰到一个非常大的数字的时候,js可能会解析不了.
JS中的安全数字:
> Number.MAX_SAFE_INTEGER 可以查看js中的最大数字
> 9007199254740991> Number.isSafeInteger(1323819148127502300) 可以判断是否是一个安全的数字
> false> id的值已经超出了js中最大的Number数值,会导致js无法正确的进行数字的处理和运算,例如:
>1323819148127502300 + 1 === 1323819148127502300 + 2
>true
解决方案:
json-bigint() json-bigint - npm
包的处理: 其实就是把"大数"转换为一个js字符串对象,这样js就可以识别了,当用到的时候就可以使用这个对象.tostring转换成字符串
1.安装依赖包:
npm install json-bigint -S
2.在 @/utils/request.js
模块中导入 json-bigint
模块:
// 导入大数处理的包
import bigInt from 'json-bigint'
3.声明处理大数问题的方法:
try和catch的使用,把可能有错误的代码放到try里面,而catch是备胎,为了让自己的程序更加的安全,不容易崩溃导致后面的代码无法正常跑了,咱们可以把那些可能会崩溃的代码用try包起来,用catch进行处理
utils/request.js
// data 是服务器响应回来的,待处理的数据
const transBigInt = data => {try {// 尝试进行大数处理// 优选方案return bigInt.parse(data)} catch {// 大数处理失败,单纯的进行 JSON -> 对象的转换// 兜底的方案return JSON.parse(data)}
}
4.在调用 axios.create()
方法期间,指定 transformResponse
选项:
// 创建axios的实例对象
const instance = axios.create({// 配置请求的根路径baseURL: 'http://www.baidu.com',// 对服务器响应回来的数据,进行预处理transformResponse: [transBigInt]
})
5.大数(art_id)变成了一个js字符串对象, 调用 .toString()
方法,把大数对象转为字符串表示的数字:
参考连接:
关于前端js中遇到大数字时的解决 - 简书
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt
http://es6.ruanyifeng.com/#docs/number#BigInt-%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B