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"
　　}

*/

　　　}
　]

自用

搜索

復制