Jinuss's blog Jinuss's blog
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript高级程序设计》
    • 《Vue》
    • 《React》
    • 《Git》
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • 学习
  • 实用技巧
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

东流

前端可视化
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript高级程序设计》
    • 《Vue》
    • 《React》
    • 《Git》
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • 学习
  • 实用技巧
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • HTML

  • CSS

  • 浏览器

    • 浅谈 MessageChannel
    • Web Worker多线程编程
    • 浏览器精度问题
      • 跨标签通信BroadChannel
    • 页面
    • 浏览器
    东流
    2024-06-24
    目录

    浏览器精度问题

    # 问题产生

    浏览器端一般情况下无法正确解析后端返回的long类型的主键,比如id啥的,这主要和 javascript 的精度问题有关,long类型的数据会被截断,超过 17 位就会补 0,导致前端无法正确解析。

    # 解决方案

    1. 使用BigInt类型,BigInt类型是 javascript 新增的数据类型,它可以表示任意大小的整数,而不受 javascript 的精度限制。
    const id = BigInt(1234567890123456789);
    const key = 1234567890123345678990n;
    
    1
    2
    1. 使用String类型,String类型是 javascript 的一种数据类型,它可以表示任意大小的字符串,而不受 javascript 的精度限制。

    但是如果要用到的值是请求后端接口返回的值,就会出现值被自动截断补 0 的情况,这个时候就需要借助第三方插件了,推荐使用json-bigint,在创建 axios 实例的时候,统一进行转换处理,代码如下

    const options = {
      transformResponse: [
        (data: any) => {
          try {
            return JSONBig().parse(data);
          } catch (error) {
            return data;
          }
        },
      ],
    };
    
    const instance = axios.create(option);
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    编辑 (opens new window)
    上次更新: 2024/06/26, 10:09:59
    Web Worker多线程编程
    跨标签通信BroadChannel

    ← Web Worker多线程编程 跨标签通信BroadChannel→

    最近更新
    01
    GeoJSON
    05-08
    02
    Circle
    04-15
    03
    CircleMarker
    04-15
    更多文章>
    Theme by Vdoing | Copyright © 2024-2025 东流 | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式