json-bigint處理大數(shù)字問題

js里面的整數(shù)有安全范圍，即最大能顯示的范圍，超過了這個范圍可能會精度丟失

Number.MAX_SAFE_INTEGER  //值為9007199254740991

json-bigint：可以像JSON.parse一樣方便轉(zhuǎn)換

用法：

//導(dǎo)入
import JSONbig from 'json-bigint'

//可以通過axios的transformResponse方法，這個方法的作用是在傳遞給then/catch前，允許修改響應(yīng)數(shù)據(jù)

//axios在這里默認(rèn)把響應(yīng)體從json字符串轉(zhuǎn)成了js對象
axios.defaults.transformResponse = [function (data) {
console.log(data)//這里的data是字符串，在這個字符串的是沒有丟失精度的，所以需要在這里先把精度調(diào)好

	try {
	//作用1：把json字符串轉(zhuǎn)為js對象
	//作用2：把里面的大數(shù)字做安全處理
	 return JSONbig.parse(data)
	}catch(){
	return data;
	}
	//return data;
}]

//如果不寫這個方法，返回的數(shù)據(jù)是自動就轉(zhuǎn)為json對象的了，如果寫了，就要自己轉(zhuǎn)為對象，即return JSON.parse(data)

注意：

alert會自動調(diào)用了toString()方法

只要經(jīng)過json-bigint轉(zhuǎn)換后的id，直接toString()，就能得到真實的id

超大整型數(shù)字處理json-bigint的應(yīng)用

1.json-bigint的作用和原理

json-bigint的作用：

項目中如果使用一些超出javascript語言限制的超大整型數(shù)字信息，該數(shù)字會變形為其他信息，為了避免產(chǎn)生問題，可以通過json-bigint做轉(zhuǎn)換，使得超大整型數(shù)字可以正常使用，這就是json-bigint的作用。

情景：

• 后端服務(wù)器返回的文章id已經(jīng)大大超過了js語言可以表達的最大整型范疇，因而直接使用的時候會發(fā)生變型:

例如：

• 本質(zhì)id為：1215831343376629760
• 變型后為：1215831343376629800

console.log(1215831343376629760)    // 輸出為：1215831343376629800

• javascript中可以表達的最大整型可以通過如下代碼獲得：

console.log( Number.MAX_SAFE_INTEGER )
// 輸出：9007199254740991

json-bigint的原理：

json-bigint會把超大整型的數(shù)字信息，拆分為小段信息存儲到數(shù)組的各個元素中，待使用的時候再拼接到一起變?yōu)樽址?/p>

github網(wǎng)站相關(guān)介紹： 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(錯誤)

結(jié)論：

• json-bigint會對一個包含超大整型信息的“字符串”做轉(zhuǎn)換處理變?yōu)閷ο?，這個對象可以獲得正確的超大整型數(shù)字信息。

2.超大整型數(shù)字的具體處理

示例：

• 應(yīng)用超大整型數(shù)字處理技術(shù)對接口返回的文章id信息做處理，使得可以被正確接收和使用。

• 服務(wù)器給客戶端返回數(shù)據(jù)的第一手處理者是 “轉(zhuǎn)換器( transformResponse )”，轉(zhuǎn)換器處理完畢再交給響應(yīng)攔截器使用，故要對超大整型數(shù)字信息做處理，下手點是"轉(zhuǎn)換器"(響應(yīng)攔截器獲得數(shù)據(jù)已經(jīng)是變形后的內(nèi)容了)

本質(zhì)上：服務(wù)器返回信息的類型是“字符串”，要經(jīng)過轉(zhuǎn)換器做JSONbig.parse()轉(zhuǎn)化處理，所以響應(yīng)攔截器接收到的是對象。

步驟：

1.安裝工具依賴包：

npm i json-bigint

2.在src/utils/ax.js中引入json-bigint模塊，對服務(wù)器返回的信息做處理，具體通過axios的 “數(shù)據(jù)轉(zhuǎn)換” 機制實現(xiàn)：

import JSONbig from 'json-bigint'

// 服務(wù)器端返回，數(shù)據(jù)轉(zhuǎn)換器，應(yīng)用
axios.defaults.transformResponse = [function (data) {
  // data的返回形式有兩種
  // 1. 實體字符串
  // 2. 空字符串(不能轉(zhuǎn)的)
  // JSONbig.parse針對超大整型進行處理，其他信息不給處理
  if (data) {
    return JSONbig.parse(data)
  }
  return data
}]

注意：

1.上述數(shù)據(jù)轉(zhuǎn)換一定要設(shè)置else，以便對空字符串做處理，因為服務(wù)器有時候會返回空字符串信息。

2. json-bigint處理的是字符串類型的信息，超大整型數(shù)字給處理，普通信息不給與處理。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論