JS处理Number类型遇到精度丢失（尤其是long类型）

在项目中使用axios进行数据请求时，发现拿到的response中的id字段精度丢失，后端使用的是long类型。（注意chrome插件JsonView也有丢失精度问题）

一共有三种方法解决。我用的是第一种。

项目脚手架vue

使用Jsonlint处理

第一步
安装 jison

npm install jison

第二步
这里把 jsonlint.l、jsonlint.y 下载到本地项目中，如图：

image.png

这两个文件分别是词表文件 - lexfile - jsonlint.l、语法文件 - grammFile - jsonlint.y

修改 jsonlint.y 词法文件关于JSONNumber的这段代码：

JSONNumber
    : NUMBER
        {$$ = yytext == String(Number(yytext))? Number(yytext): yytext;}
    ;

第三步
生成我们要的 jsonlint.js

jison jsonlint.y jsonlint.l

第四步
引入 jsonlint.js 至项目

import jsonlint from './utils/jsonlint'

第五步
在axios的transformResponse中处理数据
transformResponse 在传递给 then/catch 前，允许修改响应数据

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000, // request timeout
  transformResponse: [function(data) {
    // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
    return jsonlint.parse(data)
  }]
})

这里有个坑
在build后的项目会发现，无法引用到jsonlint
这是因为这里使用了CommonJs写法，而在应用中并没有做相应的模块转换使得浏览器能够识别。
若是babel 6, 可以看这位同仁的文章
https://www.cnblogs.com/vickya/p/8645061.html

若是babel 7 ，设置
https://www.babeljs.cn/docs/babel-preset-env
babel7设置
增加['@babel/preset-env', { 'modules': 'commonjs' }]

module.exports = {
  presets: [
    '@vue/app',
    ['@babel/preset-env', { 'modules': 'commonjs' }]
  ]
}

使用json-bigint处理

npm i json-bigint
axios 配置项 transformResponse 处理返回结果

import axios from 'axios'
import JSONbig from 'json-bigint'

const request = axios.create({
  // ... 其它配置
  
  // `transformResponse` allows changes to the response data to be made before
  // it is passed to then/catch
  transformResponse: [function (data) {
    // Do whatever you want to transform the data
    return JSONbig.parse(data)
  }],
  
  // ... 其它配置
})

方法三

最简单。让后端把Long改成String型返回。