JavaScript 能夠準確表示的整數(shù)范圍在-2^53到2^53之間（不含兩個端點），超過這個范圍，無法精確表示這個值，這使得 JavaScript 不適合進行科學(xué)和金融方面的精確計算。

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

上面代碼中，超出 2 的 53 次方之后，一個數(shù)就不精確了。
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 能夠精確表示的極限。

后端返回的數(shù)據(jù)一般都是 JSON 格式的字符串。

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

如果這個字符不做任何處理，你能方便的獲取到字符串中的指定數(shù)據(jù)嗎？非常麻煩。所以我們要把它轉(zhuǎn)換為 JavaScript 對象來使用就很方便了。

幸運的是 axios 為了方便我們使用數(shù)據(jù)，它會在內(nèi)部使用 JSON.parse() 把后端返回的數(shù)據(jù)轉(zhuǎn)為 JavaScript 對象。

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

可以看到，超出安全整數(shù)范圍的 id 無法精確表示，這個問題并不是 axios 的錯。

了解了什么是大整數(shù)的概念，接下來的問題是如何解決？

json-bigint 是一個第三方包，它可以幫我們很好的處理這個問題。

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

npm i json-bigint

下面是使用它的一個簡單示例。

import JSONbig from 'json-bigint'const str = '{ "id": 1253585734669959168 }'console.log(JSON.parse(str)) // 1253585734669959200// 它會把超出 JS 安全整數(shù)范圍的數(shù)字轉(zhuǎn)為一種類型為 BigNumber 的對象 // 我們在使用的時候需要把這個 BigNumber.toString() 就能得到原來正確的數(shù)據(jù)了 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
安全整數(shù)范圍的數(shù)字轉(zhuǎn)為一個 BigNumber
類型的對象，對象數(shù)據(jù)是它內(nèi)部的一個算法處理之后的，我們要做的就是在使用的時候轉(zhuǎn)為字符串來使用。

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

解決思路：Axios 會在內(nèi)部使用 JSON.parse 把后端返回的數(shù)據(jù)轉(zhuǎn)為 JavaScript 數(shù)據(jù)對象。所以解決思路就是：不要讓 axios 使用 JSON.parse 來轉(zhuǎn)換這個數(shù)據(jù)，而是使用 json-biginit 來做轉(zhuǎn)換處理。axios 提供了一個 API：transformResponse

所以我們在 request.js 請求模塊中添加處理代碼：

/*** 基于 axios 封裝的請求模塊*/ import axios from 'axios' import JSONbig from 'json-bigint'// 創(chuàng)建一個 axios 實例，說白了就是復(fù)制了一個 axios // 我們通過這個實例去發(fā)請求，把需要的配置配置給這個實例來處理 const request = axios.create({baseURL: 'http://ttapi.research.itcast.cn/', // 請求的基礎(chǔ)路徑// 定義后端返回的原始數(shù)據(jù)的處理// 參數(shù) data 就是后端返回的原始數(shù)據(jù)（未經(jīng)處理的 JSON 格式字符串）transformResponse: [function (data) {// Do whatever you want to transform the data// console.log(data)// 后端返回的數(shù)據(jù)可能不是 JSON 格式字符串// 如果不是的話，那么 JSONbig.parse 調(diào)用就會報錯// 所以我們使用 try-catch 來捕獲異常，處理異常的發(fā)生try {// 如果轉(zhuǎn)換成功，則直接把結(jié)果返回return JSONbig.parse(data)} catch (err) {console.log('轉(zhuǎn)換失敗', err)// 如果轉(zhuǎn)換失敗了，則進入這里// 我們在這里把數(shù)據(jù)原封不動的直接返回給請求使用return data}// axios 默認在內(nèi)部使用 JSON.parse 來轉(zhuǎn)換處理原始數(shù)據(jù)// return JSON.parse(data)}] })// 請求攔截器 request.interceptors.request.use(// 任何所有請求會經(jīng)過這里// config 是當前請求相關(guān)的配置信息對象// config 是可以修改的function (config) {const user = JSON.parse(window.localStorage.getItem('user'))// 如果有登錄用戶信息，則統(tǒng)一設(shè)置 tokenif (user) {config.headers.Authorization = `Bearer ${user.token}`}// 然后我們就可以在允許請求出去之前定制統(tǒng)一業(yè)務(wù)功能處理// 例如：統(tǒng)一的設(shè)置 token// 當這里 return config 之后請求在會真正的發(fā)出去return config},// 請求失敗，會經(jīng)過這里function (error) {return Promise.reject(error)} )// 響應(yīng)攔截器// 導(dǎo)出請求方法 export default request

擴展：ES2020 BigInt ES2020 引入了一種新的數(shù)據(jù)類型 BigInt（大整數(shù)），來解決這個問題。BigInt
只用來表示整數(shù)，沒有位數(shù)的限制，任何位數(shù)的整數(shù)都可以精確表示。 參考鏈接：
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

總結(jié)

以上是生活随笔為你收集整理的解决后端返回数据中的大数字问题(使用第三方包json-bigint ）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。