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

最新推荐文章于 2024-10-23 10:32:22 发布

有缘千里来相会！

最新推荐文章于 2024-10-23 10:32:22 发布

阅读量2.5k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue-cli3

原文链接：https://segmentfault.com/q/1010000039982409?utm_source=tag-newest

当后端返回的数字超过前端显示的最大精度时，可以通过axios结合json-bigint库来解决数字精度丢失的问题。通过设置axios的transformResponse，将默认的JSON.parse替换为json-bigint的parse方法，确保大数据以字符串形式存储。同时注意，json-bigint处理的对象没有原型链，可能影响instanceof判断，建议使用toString.call来识别对象类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于前端能够显示的数字最大只有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方法。