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

77 篇文章 7 订阅
本文介绍了json-bigint的作用,如何解决JavaScript处理超大整型溢出的问题,以及如何在实际项目中通过axios的数据转换来确保正确解析。关键在于将超大整型字符串转换为JSONBig对象,避免数值变形。
摘要由CSDN通过智能技术生成

超大整型数字处理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处理的是字符串类型的信息,超大整型数字给处理,普通信息不给与处理。

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值