vue项目通过json-bigint在前端处理java雪花id过长导致失去精度问题

news2024/11/28 16:33:31

这里我简单模仿了一个接口
在这里插入图片描述
这里我单纯返回一个long类型的雪花id
然后前端用 axios 去请求

大家知道 axios 会对请求数据做一次处理而我们 data才是拿到我们java这边实际返回的东西简单说就是输出一下我们后端返回的内容

这里我们网络中显示的是 358661018680954880
在这里插入图片描述
但神奇的一幕发生了我们实际输出的是 358661018680954900

这个问题我之前的文章也解释过这叫 java雪花id超长导致前端接受失去精度
因为前端js的数字类型 number 最大容量小于 java的long
导致无法负载的值被四舍五入了
我之前说过后端解决直接转字符串即可
但其实前端也可以通过第三方插件 json-bigint来处理此问题
我们还是先安装依赖
终端输入

npm install json-bigint

在这里插入图片描述
然后我们可以修改一下发送请求的代码

<script>
import axios from "axios";
import JSONbig from 'json-bigint';

export default {
  name: 'App',
  data(){
    return {
    }
  },
  created(){
    axios({
      url: '/books',
      headers: {
        // 可以根据需要设置请求头
      },
      // 使用transformResponse选项将响应数据进行自定义处理
      transformResponse: [(data) => {
        // 使用JSONbig对返回的数据进行处理
        return JSONbig.parse(data);
      }]
    }).then(res => {
      console.log(res.data);
    }).catch(error => {
      console.log(error);
    });
  },
}
</script>

简单说就是在axios的transformResponse中用json-bigint提供的parse函数去处理一下
这样我们返回的内容如果过程他就会帮我们分段处理
在这里插入图片描述
放不下他会帮我们分成数组

例如一个对象中 id超长那么原来的id字段就会变成一个这样的数据放不下就帮你分成两个数组下标到时你自己再拼合一下就好了

然后我们想将数据传回给后端我们可以先将他们处理成字符串
例如我们将 then 函数中的内容改成这样

let id = res.data.c.join("");
console.log(id);

我们拿到 c的数组
然后将他拼成字符串
我们运行项目看网络
在这里插入图片描述
然后看控制台

然后这里一个知识点 BigInt js另一个种数字类型而他的容量是要比Number大的
我们引入一下第三方依赖

npm install big-integer

然后我们将代码改成这样

<script>
import axios from "axios";
import JSONbig from 'json-bigint';
import bigInt from 'big-integer';

export default {
  name: 'App',
  data(){
    return {
    }
  },
  created(){
    axios({
      url: '/books',
      headers: {
        // 可以根据需要设置请求头
      },
      // 使用transformResponse选项将响应数据进行自定义处理
      transformResponse: [(data) => {
        // 使用JSONbig对返回的数据进行处理
        return JSONbig.parse(data);
      }]
    }).then(res => {
      let id = res.data.c.join("");
      id = bigInt(id);
      console.log(id);
    }).catch(error => {
      console.log(error);
    });
  },
}
</script>

这里我们用big-integer处理超长数字类型的数据
运行结果如下
在这里插入图片描述
这里这个value 就是我们要的东西了

但其实如果你想把id还给后端就不需要big-integer了
我们直接换字符串后端的long 会自动转换的例如这里我们写个属性类
在这里插入图片描述
就一个字段是个long类型的id字段
然后我在写个接口
接收前端传过来的一个属性类对象就是只有一个long id字段的属性类的对象

然后前端直接改成这样

<script>
import axios from "axios";
import JSONbig from 'json-bigint';
//import bigInt from 'big-integer';

export default {
  name: 'App',
  data(){
    return {
    }
  },
  created(){
    axios({
      url: '/books',
      headers: {
        // 可以根据需要设置请求头
      },
      // 使用transformResponse选项将响应数据进行自定义处理
      transformResponse: [(data) => {
        // 使用JSONbig对返回的数据进行处理
        return JSONbig.parse(data);
      }]
    }).then(res => {
      let id = res.data.c.join("");
      axios.post('/books', { id: id })
      .then(res => {
        console.log(res.data);
      })
      .catch(error => {
        console.log(error);
      });
    }).catch(error => {
      console.log(error);
    });
  },
}
</script>

这里我们处理成字符串后马上就调用 post请求将字符串id仍会给了后端
那么我们这个id是字符串类型的而java属性类中是用 long接的
能行吗？
我们直接运行
在这里插入图片描述
前端控制台可以看到传了一个对象其中有一个字段字符串的id
我们看java控制台

很明显他已经自动帮我们让字符串变成 long了