前端大数字精度丢失问题

项目中突然遇到数据提交出错，通知后端时说我返回数据有问题。
9137822703981626000 这串数字是我收到的后端返回的编号数据，实际后端数据为 9137822703981626197。
造成这个的原因就是后端返回数据过大，超过了16位的整数，而js解析只能解析到16位，超过16位就会丢失精度，类似于浮点数的运算误差，这是属于语言限制
解决方式：
我的项目是vue项目，用的axios做的接口交互，axios提供了专门的API，transformResponse去自定义转换后端返回的数据类型
json-bigint是专门处理js大数据失真的第三方包

首先：

npm install json-bigint

下载json-bigint包

var jsonBig = require('json-bigint')({ "storeAsString": true });

之后引入

service.defaults.transformResponse = [
    function(data) {
        try {
            // 正常同通过return JSON.parse(data)对数据进行转换
            // 但是转化完成的数据可能超出安全数据长度
            // 因此我们定制使用第三包来转化
            return jsonBig.parse(data)
        } catch (err) {
            console.log(err);
            // 转换失败返回一个空对象
            return {}
        }
    }
]

之后在request文件中配置就OK了。

因为我们项目的配置原因，所有页面的编号之类的信息都是特别长的整数，后端都反了，我们只能解决。而造成这个的根本原因就是类型问题，我们也可以在接收数据时直接将数据转换为string类型，再去处理。

但是！！！之后我发现，我在操作数据用于form表单，带校验的时候，就会报错，无法获取数据，找了很多种方法，都没能解决。最后尝试使用解构赋值，将需要赋值到form表单的数据通过解构赋值的方式解构出来到一个新的对象里面才可以，具体的问题我也没找出来，能力有限，之后有时间会好好研究。