今天开发遇到个问题，服务器后端的Long类型数据，传到前端会出现精度丢失，如：164379764419858435，前端会变成164379764419858430。在浏览器中做测试可知，这就是一个精度丢失的问题。前端使用的axios来发起请求的，最开始以为是浏览器的问题，但是通过postman来请求是没问题，打开浏览器开发工具，在xhr下的response响应中也是没问题的，代表是请求成功后数据格式化出问题了，下面讲解下各种解决方案。

出现原因

后台数据库定义的bigint类型（对应Long）的值太长会导致传递给前端的时候精度丢失,其原因是后端语言和js对字节码的解析长度不一样。前端js对Long类型支持的精度不够，导致后端使用的Long传到前端丢失精度。

方案一：

前端引入 json-bigint

yarn add json-bigint
或
npm install json-bigint

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

export const list = (data) => {
    return request({
        url: baseUrl + '/fly63/api/list',
        method: 'post',
        params: data,
        transformResponse: [ data => {
            data = JSONbig.parse(data);
            data.list.filter((item)=>{
                item.id = item.id.toString();
                return item;
            })
            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类型数据。（推荐）

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/10454