大数字问题
🤨 什么是大数字
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'
最后
最近找到一个VUE的文档,它将VUE的各个知识点进行了总结,整理成了《Vue 开发必须知道的36个技巧》。内容比较详实,对各个知识点的讲解也十分到位。
有需要的小伙伴,可以点击下方卡片领取,无偿分享