大数字问题

🤨 什么是大数字

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: '',// 对服务器响应回来的数据，进行预处理transformResponse: [transBigInt]
})
5.大数(art_id)变成了一个js字符串对象, 调用 .toString() 方法，把大数对象转为字符串表示的数字：
'xxx'