json-bigin大数值问题详解

大数值问题

安装json-bigint包

npm i json-bigint

关键字：

• JSONBig
• axios的transformResponse

后端回传的真实id是19位的数值，超过了js能表达的最大安全整数，所以要引入一个额外的包JSONBig来处理这个问题。

在src/utils/request.js中（就是封装axios的工具文件）

import JSONBig from 'json-bigint' // 导入JSONBig
const instance = axios.create({
  baseURL: 'http://ttapi.research.itcast.cn',
  // TransformResponse:axios提供的工具，用在获取后端数据之后，先进行处理，再通过promise返回给axios调用者
  // transformResponse发生在axios 的响应拦截器之前。
+  transformResponse: [function (data) {
    // 由于后端返回的数据有出现大数问题（文章编号）,这里使用json-bigint处理一下
    // 优先使用JSONBig转一下
+    try {
+      return JSONBig.parse(data) // 字符串--->对象
+    } catch (err) {
+      return data
+    }
+  }]
})

• transformResponse发生在axios 的响应拦截器之前。
• JSONBig.parse()用来处理大数。
• 本质上：服务器返回信息的类型是“字符串”，要经过转换器做JSONbig.parse()转化处理，所以响应拦截器接收到的是对象。

示例：

【该图来源网络，侵联删】

理解：

• 后端传来非大数

• 响应回来数据，会在Preview进行优化（通过JSON.parse()把响应回来的字符串转为number），再在response显示出来
• 例如id，使用的时候，id是数值

• 后端传来大数

• 响应回来数据，在响应拦截器之前，进入响应处理函数transformresponse中，使用JSONBig.parse将响应数据转为一个大数的对象
• 使用的时候，通过toString（）把这个大数对象转为字符串使用
• 例如id，不管是数值，还是字符串，都能达到区分的目的

理解示图：