本文正在参加「金石计划 . 瓜分6万现金大奖」
大数字问题
🤨 什么是大数字
JS 能表示的最大安全数值区间是 -Math.pow(2, 53) + 1 ~ Math.pow(2, 53) - 1，超过这个区间的数字称为大数字。
🤨 问题描述
从文章列表，根据文章列表项的 ID 进入到文章详情的时候，有的时候会出现 404。
🤨 原因分析
后端返回的数据大部分是 JSON 格式的字符串，为了方便我们使用，axios 内部会对这个数据进行 JSON.parse 反序列化的操作；
而当这个 JSON 格式的字符串中包含大数字的时候，JSON.parse 是搞不定的，会出现转出来的结果和原来不一致的问题；
🤨 解决方案 1
和后端协商，返回的 ID 使用字符串的形式进行表示；
前端配置 axios 的 transformResponse 选项，手动使用一些第三方包对后端返回的数据进行处理，例如 json-bigint。
问题演示
有问题代码
后端代码
const express = require('express')
const cors = require('cors')
const app = express()
app.use(cors())
app.get('/', (req, res) => {
// 后端返回的是 JSON 格式的字符串，字符串中的数字超出了 2 的 53 次方，即大数字
// exceed Math.pow(2, 53)
res.end('{ "id": 900719925474099288 }')
})
app.listen(3001, () => console.log('Server running on http://localhost:3001'))
前端代码
utils/request.ts
import axios from 'axios'
const request = axios.create({
baseURL: 'http://localhost:3001',
})
export default request
App.vue
<script setup lang="ts" name="App">
import request from './utils/request'
request.get('/').then(({ data }) => {
console.log(data)
})
</script>
<template>
<h1>大数字测试</h1>
</template>
解决方案
utils/request.ts
import axios from 'axios'
import JSONBigInt from 'json-bigint'
const request = axios.create({
baseURL: 'http://localhost:3001',
transformResponse: [
(data) => {
try {
return JSONBigInt.parse(data)
} catch (err) {
return data
}
},
],
})
export default request
App.vue
<script setup lang="ts" name="App">
import JSONBigInt from 'json-bigint'
import request from './utils/request'
request.get('/').then(({ data }) => {
console.log(JSONBigInt.stringify(data))
})
</script>
<template>
<h1>大数字测试</h1>
</template>
🤨 解决方案 2
使用json-bigint包
1.安装并导入依赖包：
npm install json-bigint -S
// 导入大数处理的包
import bigInt from 'json-bigint'
2.声明处理大数问题的方法：
使用try，catch，可以在catch方法中捕捉错误，避免程序因遇到错误 直接中断崩溃
utils/request.js
// data 是服务器响应回来的，待处理的数据
const transBigInt = data => {
try {
// 尝试进行大数处理
// 优选方案
return bigInt.parse(data)
} catch {
// 大数处理失败，单纯的进行 JSON -> 对象的转换
// 兜底的方案
return JSON.parse(data)
}
}
3.在调用 axios.create() 方法期间，指定 transformResponse 选项：
// 创建axios的实例对象
const instance = axios.create({
// 配置请求的根路径
baseURL: 'http://www.juejin.com',
// 对服务器响应回来的数据，进行预处理
transformResponse: [transBigInt]
})
5.大数(art_id)变成了一个js字符串对象, 调用 .toString() 方法，把大数对象转为字符串表示的数字：
'xxx'
