后端bigInt类型返回前端精度丢失问题解决

json-bigint处理精度丢失问题

后端在返回表格list时，选择使用雪花算法生成一个唯一id，在mysql数据库中采用bigInt类型储存。但由于其位数超过了js的精度范围。导致id的最后几位数字和实际数字不一致。
比如下面这个cid，实际上这个时候返回的值所看到的值和数据库内的值是不一致的。这个时候就需要我们对返回的数据进行处理。我的是vue+element项目。推荐使用第三方库json-bigint。

首先下载json-bigint

npm i json-bigint

然后找到axios.js文件，加入下面的代码

const JSONbig = require('json-bigint')({ 'storeAsString': true});

然后找到创建axios实例的地方，将其改成下面的样子：

// 创建axios实例
const service = axios.create({
  baseURL: window.g.VUE_APP_API_HOST,
  timeout: 10000000,
  // 改的就是下面这部分
  transformResponse: [function (data) {
    try {
      return JSONbig.parse(data)
    } catch (err) {
      return data
    }
  }],
})

最后你可以进行控制台打印，此时虽然在network中，看到的数据精度还是丢失的，但是进行对axios处理以后，实际打印出来的id与数据库中的id是一致的。