vue接口返回数字类型位数超过16精度丢失解决办法
我是在main.js页面解决的
安装插件 json-bigint
npm i json-bigint
在main.js页面使用
import Vue from 'vue' import App from './App.vue'
import axios from '../node_modules/axios'//引入axios
Vue.prototype.$axios = axios//挂载axios
import JSONbig from 'json-bigint'//解决超过 16 位数字精度丢失问题
//axios.defaults.transformResponse 是axios拦截器,在后端返回的json数据序列化之前处理原始的数据
axios.defaults.transformResponse = [
//解决超过 16 位数字精度丢失问题
//在返回参数接收前进行处理
function(data) {
//data就是接口返回的原始数据
return JSON.parse(JSON.stringify(JSONbig.parse(data)))
/*
console.log(JSONbig.parse('{"value":12345678912345678912}'));
控制台输出类似
{
value: BigNumber
c: (2) [123456, 78912345678912]
e: 19
s: 1
}
页面显示 12345678912345678912
不影响使用
console.log(JSON.stringify(JSONbig.parse(JSONbig.parse('{"value":12345678912345678912}'))))
控制台输出 json 字符串
{"value":"12345678912345678912"}
可见已转成 json 字符串
再使用 JSON.parse()
console.log(JSON.parse(JSON.stringify(JSONbig.parse('{"value":12345678912345678912}'))))
控制台输出 json
{
value:"12345678912345678912"
}
*/
}
]
自用
