Vue-typescript Long类型失去精度

taixingyiji

发布于 2022-07-25 15:08:31

1.9K0

发布于 2022-07-25 15:08:31

文章被收录于专栏：taixingyiji的博客笔记

# Vue-typescript Long类型失去精度

Vue typescript项目Long类型数据失去精度如何解决

# 一、后台解决方案

将 Long 类型转换成 String 类型然后传给前端

Springboot 代码示例

代码示例：

import com.fasterxml.jackson.databind.annotation.JsonSerialize;
import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;

@JsonSerialize(using = ToStringSerializer.class)

# 二、前端解决方案

通过 json-bigint 进行将 Long 类型转换成 String

# 1. 添加依赖 `"json-bigint": "^1.0.0"` ,此处我使用的是 `1.0.0` 版本

yarn 安装

yarn add json-bigint

npm 安装

npm i json-bigint

# 2. 编写`json-bigint.d.ts` 文件，放入项目中 `scr/typings` 目录下

此步骤是为了让 ts 可以使用 js 插件，不是使用 ts，开发的可以略过

declare module 'json-bigint'

# 3. 在你需要转换的地方使用 `json-bigint`

此处我是在 axios 中，从后台获取值转换为json前，先使用 json-bigint

在文件中引入 json-bigint

import JSONBig from 'json-bigint'

1

修改 axios 中的 transformResponse

this.axios.defaults.transformResponse = [(data: any) => {
  // 此处是使用json-bigint进行json格式化
  return JSONBig.parse(data)
}]

为方便理解，附上封装的 axios 部分代码

import axios from 'axios'

class LocalAxios {
   public axios: any;
   constructor(url: string) {
     // 创建axios实例
     this.axios = axios.create({
       baseURL: process.env.VUE_APP_BASE_API,
       timeout: 100000,
       withCredentials: true
     })
     this.transResponse()
   }
   private transResponse() {
     // 将数据格式化成json
     this.axios.defaults.transformResponse = [(data: any) => {
       return JSONBig.parse(data)
     }]
   }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-04-01，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript