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 ）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。