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

本文正在参加「金石方案 . 分割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'