浏览器精度问题

问题产生

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

解决方案

  1. 使用BigInt类型,BigInt类型是 Javascript 新增的数据类型,它可以表示任意大小的整数,而不受 Javascript 的精度限制。
const id = BigInt(1234567890123456789);
const key = 1234567890123345678990n;
  1. 使用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);

你可能感兴趣的:(前端,前端,javascript)