解决后端返回数据中的大数字问题(使用第三方包json-bigint ）

JavaScript 能够准确表示的整数范围在-2^53到2^53之间（不含两个端点），超过这个范围，无法精确表示这个值，这使得 JavaScript 不适合进行科学和金融方面的精确计算。

Math.pow(2, 53) // 90071992547409929007199254740992  // 9007199254740992
9007199254740993  // 9007199254740992Math.pow(2, 53) === Math.pow(2, 53) + 1
// true

上面代码中，超出 2 的 53 次方之后，一个数就不精确了。
ES6 引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER这两个常量，用来表示这个范围的上下限。

Number.MAX_SAFE_INTEGER === Math.pow(2, 53) - 1
// true
Number.MAX_SAFE_INTEGER === 9007199254740991
// trueNumber.MIN_SAFE_INTEGER === -Number.MAX_SAFE_INTEGER
// true
Number.MIN_SAFE_INTEGER === -9007199254740991
// true

上面代码中，可以看到 JavaScript 能够精确表示的极限。

后端返回的数据一般都是 JSON 格式的字符串。

'{ "id": 9007199254740995, "name": "Jack", "age": 18 }'

如果这个字符不做任何处理，你能方便的获取到字符串中的指定数据吗？非常麻烦。所以我们要把它转换为 JavaScript 对象来使用就很方便了。

幸运的是 axios 为了方便我们使用数据，它会在内部使用 JSON.parse() 把后端返回的数据转为 JavaScript 对象。

// { id: 9007199254740996, name: 'Jack', age: 18 }
JSON.parse('{ "id": 9007199254740995, "name": "Jack", "age": 18 }')

可以看到，超出安全整数范围的 id 无法精确表示，这个问题并不是 axios 的错。

了解了什么是大整数的概念，接下来的问题是如何解决？

json-bigint 是一个第三方包，它可以帮我们很好的处理这个问题。

使用它的第一步就是把它安装到你的项目中。

npm i json-bigint

下面是使用它的一个简单示例。

import JSONbig from 'json-bigint'const str = '{ "id": 1253585734669959168 }'console.log(JSON.parse(str)) // 1253585734669959200// 它会把超出 JS 安全整数范围的数字转为一种类型为 BigNumber 的对象
// 我们在使用的时候需要把这个 BigNumber.toString() 就能得到原来正确的数据了
console.log(JSONbig.parse(str))
console.log(JSONbig.parse(str).id.toString()) // 1253585734669959168const data = JSONbig.parse(str)console.log(JSON.stringify(data))
console.log(JSONbig.stringify(data))

json-bigint 会把超出 JS
安全整数范围的数字转为一个 BigNumber
类型的对象，对象数据是它内部的一个算法处理之后的，我们要做的就是在使用的时候转为字符串来使用。

了解了 json-biginit 怎么回事儿之后，下一步是如何配置到我们的项目中？

解决思路：Axios 会在内部使用 JSON.parse 把后端返回的数据转为 JavaScript 数据对象。所以解决思路就是：不要让 axios 使用 JSON.parse 来转换这个数据，而是使用 json-biginit 来做转换处理。axios 提供了一个 API：transformResponse

所以我们在 request.js 请求模块中添加处理代码：

/*** 基于 axios 封装的请求模块*/
import axios from 'axios'
import JSONbig from 'json-bigint'// 创建一个 axios 实例，说白了就是复制了一个 axios
// 我们通过这个实例去发请求，把需要的配置配置给这个实例来处理
const request = axios.create({baseURL: 'http://ttapi.research.itcast.cn/', // 请求的基础路径// 定义后端返回的原始数据的处理// 参数 data 就是后端返回的原始数据（未经处理的 JSON 格式字符串）transformResponse: [function (data) {// Do whatever you want to transform the data// console.log(data)// 后端返回的数据可能不是 JSON 格式字符串// 如果不是的话，那么 JSONbig.parse 调用就会报错// 所以我们使用 try-catch 来捕获异常，处理异常的发生try {// 如果转换成功，则直接把结果返回return JSONbig.parse(data)} catch (err) {console.log('转换失败', err)// 如果转换失败了，则进入这里// 我们在这里把数据原封不动的直接返回给请求使用return data}// axios 默认在内部使用 JSON.parse 来转换处理原始数据// return JSON.parse(data)}]
})// 请求拦截器
request.interceptors.request.use(// 任何所有请求会经过这里// config 是当前请求相关的配置信息对象// config 是可以修改的function (config) {const user = JSON.parse(window.localStorage.getItem('user'))// 如果有登录用户信息，则统一设置 tokenif (user) {config.headers.Authorization = `Bearer ${user.token}`}// 然后我们就可以在允许请求出去之前定制统一业务功能处理// 例如：统一的设置 token// 当这里 return config 之后请求在会真正的发出去return config},// 请求失败，会经过这里function (error) {return Promise.reject(error)}
)// 响应拦截器// 导出请求方法
export default request

扩展：ES2020 BigInt ES2020 引入了一种新的数据类型 BigInt（大整数），来解决这个问题。BigInt
只用来表示整数，没有位数的限制，任何位数的整数都可以精确表示。参考链接：
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

解决后端返回数据中的大数字问题(使用第三方包json-bigint ）相关推荐

后端返回数据中的换行符，在标签中不显示换行的解决方法
后端返回的的数据在Chrome浏览器上页面显示: 如果使用 let text = "后端返回字符串" text.replace(/\n/g,"<br/>& ...
服务器返回数据为空,iOS 处理服务器返回数据中的null
最近经常被服务器返回的数据搞的头昏脑涨,一度想要约后台同事切磋武艺! 类似服务器返回数据中带有null的情况,在以前也是时有发生,奈何当时基于自己的懒惰和对后台同事的信赖,一直对这个该死的null视而 ...
python json接口数据提取_返回数据中提取数据的方法（JSON数据取其中某一个值的方法）...
返回数据中提取数据的方法比如下面的案例是,取店铺名称接口返回数据如下: {"Code":0,"Msg":"ok","Data& ...
Fiddler中篡改后端返回数据
使用fiddler篡改返回数据,影响前端返回最近在验证一个优化需求,前端根据后端返回的身份证倒数第二位进行判断男女,如果是男生,则展示男生的图片:如果判断是女生,则展示女生的照片:如不能判断男女时, ...
layui进行分页处理，后端返回数据没有count字段，需要单独获取再添加到数据中，再进行项渲染，另有layui表格数据增删改查前后端交互
整体效果图如下: (1)分页前端界面处理 (2)分页后端的数据处理具体代码如下: 前端界面代码:包括分页,增删改查,刷新(搜索功能还没做,后端是java代码) <!DOCTYPE html&g ...
后端返回数据ios接收精度丢失问题
问题描述,通过postman调用接口返回信息拿到的BigDecimal类型的数据是正常的,后端返回给ios丢失了小数后面的值正常应该是"price":"100.00&q ...
ajax获取的数据中包含html代码,执行ajax返回数据中包含的script脚本代码
ajax虽然很方便,提升了我们的交互体验,但是它也有可恨之处,就是ajax请求得到的数据中如果包含脚本代码,比如说请求得到的是一块html内容,我们把这块html内容插入到网页中的某个地方,但是其中明 ...
VUE之Vxe-table动态生成多级表头及后端返回数据的处理
需求: 1.第一列为正常列: 2.第二列开始为动态生成列(根据接口返回数据生成): 3.最后一列为编辑列. 步骤: 写入动态html模板 <vxe-tableid="prdReques ...
本地图片根据后端返回数据展示对应图片
本地图片与后端返回的数据显示有的时候,我们会遇到的需求是显示排名同学的前三名,然而UI图是这样的,头像和内容是后端返回的数据,而排名的图片是我们本地的图片,我是这样处理的,来看代码呦!! 1.首先 ...

解决后端返回数据中的大数字问题(使用第三方包json-bigint ）

解决后端返回数据中的大数字问题(使用第三方包json-bigint ）相关推荐

最新文章

热门文章