当前位置：首页 > article >正文

浏览器精度问题

article 2025/3/1 11:29:08

问题产生

浏览器端一般情况下无法正确解析后端返回的long类型的主键，比如作为索引的id，为了避免重复可能设置成一个很大的唯一UUID，但是超过一定范围后，浏览器可能无法正常解析。这主要和 Javascript 的精度问题有关，long类型的数据会被截断，超过 17 位就会补 0，导致前端无法正确解析。

解决方案

使用BigInt类型，BigInt类型是 Javascript 新增的数据类型，它可以表示任意大小的整数，而不受 Javascript 的精度限制。

const id = BigInt(1234567890123456789);
const key = 1234567890123345678990n;

使用String类型，String类型是 javascript 的一种数据类型，它可以表示任意大小的字符串，而不受 javascript 的精度限制。

但是如果要用到的值是请求后端接口返回的值，就会出现值被自动截断补 0 的情况，这个时候就需要借助第三方插件了。

推荐使用json-bigint，在创建 axios 实例的时候，统一进行转换处理。
示例代码如下:

const options = {
  transformResponse: [
    (data: any) => {
      try {
        return JSONBig().parse(data);
      } catch (error) {
        return data;
      }
    },
  ],
};

const instance = axios.create(option);