数字精度丢失处理

利用JSON-BIGINT处理大数字问题

我的JS应用程序中有大量来自后端服务的数据。我不想丢失小数点后的任何数字。
但是当后端返回的数据是99999999999999.99的时候 通过axios会自动处理成1000000000000000 这个时候就会有精度丢失。

• 99999999999999.99 == 1000000000000000 这个时候是 true 显然不是我们想要的结果

示例

import JSONbig from 'json-bigint'
 
const str = '{ "id": 1253585734669959168 }'
 
console.log(JSON.parse(str)) // 1253585734669959200
 
// 它会把超出 JS 安全整数范围的数字转为一种类型为 BigNumber 的对象
// 我们在使用的时候需要把这个 BigNumber.toString() 就能得到原来正确的数据了
console.log(JSONbig.parse(str))
// 对于JSONbig 它在处理数据时，会自动识别其中的 大数， 并以数组的格式保存起来
console.log(JSONbig.parse(str).id.toString()) // 1253585734669959168

其实它的原理都是一样的 精度丢失的问题
JavaScript 的数字都是双精度浮点数，在计算机里用二进制存储。当有效位数超过 52 位时，会存在精度丢失。

解决方法

json-bigint 会把超出 JS 安全整数范围的数字转为一个 BigNumber 类型的对象，对象数据是它内部的一个算法处理之后的，我们要做的就是在使用的时候转为字符串来使用。

通过 Axios 请求得到的数据都是 Axios 处理（JSON.parse）之后的，我们应该在 Axios 执行处理之前手动使用 json-bigint 来解析处理。Axios 提供了自定义处理原始后端返回数据的 API：transformResponse 。

• json-bigint 是一个第三方包，它可以帮我们很好的处理这个问题。
• 使用它的第一步就是把它安装到你的项目中。

npm i json-bigint

• 然后在封装请求方法的index.js中引用

import Vue from 'vue'
import axios from 'axios'
import { genarateGUID } from './guid'

import jsonBig from "json-bigint"

const $http = axios.create({
    baseURL: '/front',//dev
    timeout: 300000,
    headers: {
        "Content-Type": "application/json;charset=utf-8"
    },

    // 在跨域请求时，会携带用户凭证
    withCredentials: true,
    transformResponse: [function (data) {
        try {
            // 如果转换成功则返回转换的数据结果
            return jsonBig.parse(data)
        } catch (err) {
            // 如果转换失败，则包装为统一数据格式并返回
            return JSON.parse(data)

        }
    }]
})

• 这个时候后端返回的数据是99999999999999.99 我们前端显示的也是99999999999999.99

关于json-bigint更多的用法可以到ndm官网查看