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

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

  • 项目脚手架vue

使用Jsonlint处理

  • 第一步
    安装 jison

    1
    npm install jison

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

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

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

1
2
3
4
JSONNumber
    : NUMBER
        {$$ = yytext == String(Number(yytext))? Number(yytext): yytext;}
    ;

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

    1
    jison jsonlint.y jsonlint.l

  • 第四步
    引入 jsonlint.js 至项目

1
import jsonlint from './utils/jsonlint'
  • 第五步
    在axios的transformResponse中处理数据
    transformResponse 在传递给 then/catch 前，允许修改响应数据
    1
    2
    3
    4
    5
    6
    7
    8
    9
    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' }]

1
2
3
4
5
6
module.exports = {
  presets: [
    '@vue/app',
    ['@babel/preset-env', { 'modules': 'commonjs' }]
  ]
}

使用json-bigint处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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型返回。