前端请求后端数据 Number类型数据过长精度丢失

问题 ：后端Long数据类型 前端精度问题。

服务器后端的Long类型数据，传到前端会出现精度丢失，如：1686581025305661440，前端会变成1686581025305661400。

我们可以在页面中console.log一下我们的数据 看我们请求到的数据是什么 在控制台网络预览中查看数据 在我们解决问题后需要在响应中查看 预览中数据还是错误数据！

问题原因：

js当中number类型的安全整数是53位，如果超过53位，则精度会丢失。如果后台传来一个64位的Long型整数，因为超过了53位，所以后台返回的值和前台获取的值会不一样。上面的例子可以看到，17位以后的数字变成了0，第17位四舍五入。

如何避免精度丢失呢？最常用的办法就是将Long类型字段统一转成String类型。

解决办法：

方案一 ：前端引入 json-bigint

yarn add json-bigint
或
npm install json-bigint

在axios封装的地方，transformResponse 在传递给 then/catch 前，允许修改响应数据。

import JSONbig from 'json-bigint';

const JSONbigToString = JSONbig({ storeAsString: true })

// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 30000,
    //在创建axios实例时插入以下代码对响应的数据进行修改
    //将后端返回的Long转为字符串来解决精度丢失的问题
  transformResponse: [function (data) {
    try {
      //转换
      return JSONbigToString.parse(data)
    } catch (err) {
      //转换失败就直接按原数据返回
      return data;
    }
  }]
})

方案二 ：修改axios的源码，在node_modules/axios/lib/default.js中找到transformResponse 将其内容改为

transformResponse: [function transformResponse(data) {
    /*eslint no-param-reassign:0*/
    if (typeof data === 'string') {
      try {
        data = JSON.parse(data);
      } catch (e) { /* Ignore */ }
    }
    return data;
  }],

（未测试 不确定是否生效）

方案三：

后台传到前台时，Long类型数据，转为String类型。可以直接操作传回的对象数据，toString()该long类型数据。（推荐）