开发中碰到大数字问题，是怎么解决的？

大数字问题

🤨 什么是大数字

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个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享