【避坑】解决后端返回Long类型的数据前端精度丢失问题

前端小学弟~

已于 2022-06-14 16:40:14 修改

阅读量2.2k

点赞数 2

分类专栏：问题解决文章标签：前端

于 2022-06-14 16:37:18 首次发布

本文链接：https://blog.csdn.net/weixin_45453514/article/details/125280451

版权

问题解决专栏收录该内容

2 篇文章 0 订阅

订阅专栏

问题：

一个小问题，前进一大步！

今天又遇到了后端返回的某个字段的数字太长，导致前端展示的时候数字变成了科学计数法，有些甚至直接展示错误；

原因：

典型的JS精度丢失问题，JS 中的Number类型只能安全地表示 -9007199254740991 (-(2^53-1)) 和9007199254740991(2^53-1) 之间的整数，任何超出此范围的整数值都可能失去精度。

解决方案：

我们的项目是Vue + Axios，因此就用Axios举例了，其实操作很简单，别眨眼，看我操作！

1、首先安装 json-bigint 的插件

yarn add json-bigint
//或者
npm i json-bigint

2、接下来，在axios中这样配置就大功告成了

//request.js
import axios from 'axios';
import JSONbig from 'json-bigint';

const JSONbigToString = JSONbig({ storeAsString: true })

const service = axios.create({
  timeout: 50_000,
  baseURL: '',
  transformResponse: [function (data) {
    try {
      //转换
      return JSONbigToString.parse(data)

    } catch (err) {
      //转换失败就直接按原数据返回
      return data;

    }
  }]
});