解决:后端返回大整型,axios精度丢失问题

390 阅读2分钟

问题

JavaScript 能够准确表示的整数范围在-2^532^53之间(不含两个端点),超过这个范围,无法精确表示这个值

Math.pow(2, 53) // 90071992547409929007199254740992  // 9007199254740992
9007199254740993  // 9007199254740992Math.pow(2, 53) === Math.pow(2, 53) + 1
// true
{ "id": 9007199254740995, "name": "Jack", "age": 18 }
// { id: 9007199254740996, name: 'Jack', age: 18 }
JSON.parse('{ "id": 9007199254740995, "name": "Jack", "age": 18 }')

解决方案

使用JSON-BIGINT处理大数字问题

pnpm add json-bigint
const jsonStr = '{ "art_id": 1245953273786007552 }'console.log(JSON.parse(jsonStr)) // 1245953273786007600// JSONBig 可以处理数据中超出 JavaScript 安全整数范围的问题
console.log(JSONBig.parse(jsonStr)) // 把 JSON 格式的字符串转为 JavaScript 对象// 使用的时候需要把 BigNumber 类型的数据转为字符串来使用
console.log(JSONBig.parse(jsonStr).art_id.toString()) // 1245953273786007552console.log(JSON.stringify(JSONBig.parse(jsonStr)))
​
console.log(JSONBig.stringify(JSONBig.parse(jsonStr))) // 把 JavaScript 对象 转为 JSON 格式的字符串转
import axios from 'axios'import jsonBig from 'json-bigint'var json = '{ "value" : 9223372036854775807, "v2": 123 }'console.log(jsonBig.parse(json))
​
const request = axios.create({
  baseURL: 'http://ttapi.research.itcast.cn/', // 接口基础路径
​
  // transformResponse 允许自定义原始的响应数据(字符串)
  transformResponse: [function (data) {
    try {
      // 如果转换成功则返回转换的数据结果
      return jsonBig.parse(data)
    } catch (err) {
      // 如果转换失败,则包装为统一数据格式并返回
      return {
        data
      }
    }
  }]
})
​
export default request

利用json-bigint处理大数字[溢出]问题 - 掘金 (juejin.cn)