解决axios获取的返回数据中数字的精度问题

shellingfordly
  • 14

由于前端能够显示的数字最大只有53位,有时候会遇到后端返回的数据中数字过大,超过了前端精度,但可能后端出于某些原因无法更改,要前端处理时。

其实本身接口返回的Response是个json字符串,由于axios默认使用JSON.parse导致精度丢失,我们可以使用第三方库修改axios默认的格式化方法,这里我使用的json-bigint

import JSONBIG from 'json-bigint';

axios.defaults.transformResponse = [
  function (data) {
    const json = JSONBIG({
      storeAsString: true,
    });
    const res = json.parse(data);
    return res;
  },
];

否则就会报错,设置格式化方法之后,返回值过大的数字就会被转为字符串。我使用的时候会有bug,必须设置storeAsString属性为true。

TypeError: BigNumber is not a constructor

除此之外,还有一个可能出现的隐藏bug,因为我的项目中对返回值做了统一的处理,因此发现了json-bigint处理后的对象是没有原型链的,返回的对象上没有__proto__属性。导致使用instanceof是无法判断的,使用typeof是可以的,但typeof无法分辨array和object,建议使用toString.call方法。

  • 正常对象,有__proto__
    image.png
  • json-bigint处理的对象,没有__proto__
    image.png
回复
阅读 1.1k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏