关于json-bigint处理大数字问题

 更新时间:2024年05月23日 17:10:02   作者:flyyy菜鸟  
这篇文章主要介绍了关于json-bigint处理大数字问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

json-bigint处理大数字问题

js里面的整数有安全范围,即最大能显示的范围,超过了这个范围可能会精度丢失

Number.MAX_SAFE_INTEGER  //值为9007199254740991

json-bigint:可以像JSON.parse一样方便转换

用法:

//导入
import JSONbig from 'json-bigint'

//可以通过axios的transformResponse方法,这个方法的作用是在传递给then/catch前,允许修改响应数据

//axios在这里默认把响应体从json字符串转成了js对象
axios.defaults.transformResponse = [function (data) {
console.log(data)//这里的data是字符串,在这个字符串的是没有丢失精度的,所以需要在这里先把精度调好

	try {
	//作用1:把json字符串转为js对象
	//作用2:把里面的大数字做安全处理
	 return JSONbig.parse(data)
	}catch(){
	return data;
	}
	//return data;
}]

//如果不写这个方法,返回的数据是自动就转为json对象的了,如果写了,就要自己转为对象,即return JSON.parse(data)

注意:

alert会自动调用了toString()方法

只要经过json-bigint转换后的id,直接toString(),就能得到真实的id

超大整型数字处理json-bigint的应用

1.json-bigint的作用和原理

json-bigint的作用:

项目中如果使用一些超出javascript语言限制的超大整型数字信息,该数字会变形为其他信息,为了避免产生问题,可以通过json-bigint做转换,使得超大整型数字可以正常使用,这就是json-bigint的作用。

情景:

  • 后端服务器返回的文章id已经大大超过了js语言可以表达的最大整型范畴,因而直接使用的时候会发生变型:

例如:

  • 本质id为:1215831343376629760
  • 变型后为:1215831343376629800
console.log(1215831343376629760)    // 输出为:1215831343376629800
  • javascript中可以表达的最大整型可以通过如下代码获得:
console.log( Number.MAX_SAFE_INTEGER )
// 输出:9007199254740991

json-bigint的原理:

json-bigint会把超大整型的数字信息,拆分为小段信息存储到数组的各个元素中,待使用的时候再拼接到一起变为字符串。

github网站相关介绍: https://github.com/sidorares/json-bigint

json-bigint使用示例:

var JSONBig = require('json-bigint');  // 需要先安装 npm i json-bigint
var str = '{ "value" : 9223372036854775807, "v2": 123 }';

var obj = JSONBig.parse(str) // 字符串--->对象
console.log(obj.value) // 9223372036854775807(正确)

var obj2 = JSON.parse(str) // 字符串--->对象
console.log(obj2.value) // 9223372036854776000(错误)

结论:

  • json-bigint会对一个包含超大整型信息的“字符串”做转换处理变为对象,这个对象可以获得正确的超大整型数字信息。

2.超大整型数字的具体处理

示例:

  • 应用超大整型数字处理技术对接口返回的文章id信息做处理,使得可以被正确接收和使用。

  • 服务器给客户端返回数据的第一手处理者是 “转换器( transformResponse )”,转换器处理完毕再交给响应拦截器使用,故要对超大整型数字信息做处理,下手点是"转换器"(响应拦截器获得数据已经是变形后的内容了)

本质上:服务器返回信息的类型是“字符串”,要经过转换器做JSONbig.parse()转化处理,所以响应拦截器接收到的是对象。

步骤:

1.安装工具依赖包:

npm i json-bigint

2.在src/utils/ax.js中引入json-bigint模块,对服务器返回的信息做处理,具体通过axios的 “数据转换” 机制实现:

import JSONbig from 'json-bigint'

// 服务器端返回,数据转换器,应用
axios.defaults.transformResponse = [function (data) {
  // data的返回形式有两种
  // 1. 实体字符串
  // 2. 空字符串(不能转的)
  // JSONbig.parse针对超大整型进行处理,其他信息不给处理
  if (data) {
    return JSONbig.parse(data)
  }
  return data
}]

注意:

1.上述数据转换一定要设置else,以便对空字符串做处理,因为服务器有时候会返回空字符串信息。

2. json-bigint处理的是字符串类型的信息,超大整型数字给处理,普通信息不给与处理。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 在Vue.js应用中实现分布式搜索和全文搜索

    在Vue.js应用中实现分布式搜索和全文搜索

    分布式搜索和全文搜索在现代应用程序中变得越来越重要,因为它们可以帮助用户快速查找和检索大量数据,Elasticsearch是一种强大的分布式搜索引擎,本文将介绍如何在Vue.js应用程序中实现分布式搜索和全文搜索,以及如何与Elasticsearch集成,需要的朋友可以参考下
    2023-11-11
  • 深入理解Vue.js源码之事件机制

    深入理解Vue.js源码之事件机制

    本篇文章主要介绍了Vue.js源码之事件机制,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue实现点击出现操作弹出框的示例

    vue实现点击出现操作弹出框的示例

    这篇文章主要介绍了vue实现点击出现操作弹出框的示例,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-11-11
  • Vue3组件不发生变化如何监听pinia中数据变化

    Vue3组件不发生变化如何监听pinia中数据变化

    这篇文章主要给大家介绍了关于Vue3组件不发生变化如何监听pinia中数据变化的相关资料,pinia是Vue的存储库,它允许您跨组件/页面共享状态,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • 如何利用vue3实现放大镜效果实例详解

    如何利用vue3实现放大镜效果实例详解

    最近有项目需要用到对图片进行局部放大,类似淘宝商品页的放大镜效果,经过一番研究功能可用,下面这篇文章主要给大家介绍了关于如何利用vue3实现放大镜效果的相关资料,需要的朋友可以参考下
    2021-09-09
  • 前端报错npm ERR! cb() never called!问题解决办法

    前端报错npm ERR! cb() never called!问题解决办法

    最近接手了一个前台项目,执行npm install的时候一直报错,所以这里就给大家总结下,这篇文章主要给给大家介绍了关于前端报错npm ERR! cb() never called!问题的解决办法,需要的朋友可以参考下
    2024-05-05
  • vue源码学习之Object.defineProperty对象属性监听

    vue源码学习之Object.defineProperty对象属性监听

    这篇文章主要介绍了vue源码学习之Object.defineProperty对象属性监听,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Vue打包后不同版本详细解析

    Vue打包后不同版本详细解析

    vue项目打包是我们日常经常遇到的,下面这篇文章主要给大家介绍了关于Vue打包后不同版本详细解析的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • 写一个Vue Popup组件

    写一个Vue Popup组件

    这篇文章主要介绍了写一个Vue Popup组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • vue+antDesign实现树形数据展示及勾选联动

    vue+antDesign实现树形数据展示及勾选联动

    本文主要介绍了vue+antDesign实现树形数据展示及勾选联动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02

最新评论