接口返回超16位number数据 JS显示丢失精度解决方法

联调接口时发现后端返回的不同对象的id重复，浏览器开发者工具查看预览如下图：

 通过postman测试接口，返回数据与后端确认一致

 百度后发现，后端返回的id字段number类型数据太长了，有19位，超过了js中number类型的最大值2的53次方即9007199254740992，若超过了这个值会出现精度丢失问题。

而且，由于本项目后端返回的是JSON格式的数据，axios响应会自动转换成js对象，浏览器预览看到的结果即为丢失精度后的数据。

出现这种情况，可以与后端沟通，让后端将id的number类型数据处理成string类型后返回给前端；

或者，引入第三方包 json-bigint，使用.parse()方法将超过安全值的number值转换成BigNumber：

安装：npm i json-bigint

导入：import bigInt from "json-bigint"

例：

const jsonStr = '{"num":7083720390568443904}'

console.log(bigInt.parse(jsonStr)) // 转换为BigNumber

console.log(bigInt.parse(jsonStr).num.toString()) // 对目标属性调用.toString()方法可得到正确的字符串

由于axios的特性，我们需要在响应数据被转换成js对象之前，将目标属性的值改为BigNumber；

可以在axios请求时，添加transformResponse配置选项，使响应数据在传递给then/catch 前进行一些修改

axios({

        method: "post",

        url: "xxx",

        params: { xxx },

        transformResponse: [

          function (data) {

            return bigInt.parse(data); // 把响应数据中的"大数"的值转换为一个js字符串对象

          },

        ],

        headers: { "Content-Type": "application/x-www-form-urlencoded" },

      })

      .then((res)=>{

        // 找到目标属性，调用.toString()方法将BigNumber转换为字符串

      })

参考链接：

解决js中大数的问题

axios中文文档|axios中文网 | axios (axios-js.com)