当前位置: 首页 > article >正文

uniapp 前端解决精度丢失的问题 (后端返回分布式id)

原因: 后端使用分布式id,  id为19位数,导致精度丢失 ,前端解决方法

这个是通过浏览器请求回来的数据,这个时候id 数据已经丢失了,在数据库查询不到,在调获详情接口的时候会有问题

实际的:

解决办法:

1. 通过  JSONbig  插件  

npm install json-bigint

2.封装 请求   longAxios.js  uni.request  (   在axios 里面可以使用transformResponse 来修改,uni.request 没有,使用 success 来获取)   

import JSONbig from 'json-bigint';
import {
	getToken
} from '@/utils/auth';
import config from '@/config';

const timeout = 10000;
const baseUrl = config.baseUrl;

const longAxios = options => {
	const {
		url,
		method,
		data,
		params, // 接收 params  
		header,
		type,
		key,
		receive
	} = options;

	return new Promise((resolve, reject) => {
		// 构建请求 URL  
		let requestUrl = `${baseUrl}${url}`;

		// 如果有 params,构建查询字符串  
		if (params) {
			const queryParams = new URLSearchParams(params).toString();
			requestUrl += `?${queryParams}`; // 将查询参数添加到 URL  
		}

		uni.request({
			url: requestUrl,
			method,
			data,
			header: {
				Authorization: 'Bearer ' + getToken(),
				...header // 如果有额外的头部信息,可以合并  
			},
			dataType: 'String', // 将接收的数据转换成字符串类型,而不直接解析  
			success: res => {
				try {
					// 如果大数字类型转换成功则返回转换的数据结果  
					res.data = JSONbig.parse(res.data)
				} catch (err) {
					// 如果转换失败,则包装为统一数据格式并返回  
					resolve(JSON.parse(res.data));
				}
				
				// data = JSONbig.parse(data);
				if (type == 'array') {
					res.data.filter((item) => {
						item[key] = JSONbig.parse(item[key]).toString()
						return item
					})
				} else if (type == 'rows') {
					res.data.rows.filter((item) => {
						item[key] = JSONbig.parse(item[key]).toString()
						return item
					})
				} else {
					res.data[key] = JSONbig.parse(res.data[key]).toString()
				}
				console.log(res)
				 // 返回结果  
				    if (receive === 'rows') {  
				        resolve(res.data.rows); // 确保 resolve 返回正确的数据  
				    } else {  
				        resolve(res.data[receive]);  
				    }  

			},
			fail: err => {
				reject(err);
			},
		});
	});
}

export default longAxios;

3.封装api(根据自己的业务来修改, 注意key 值,我这里是id, 返回的是rows )

import longAxios from '@/utils/longAxios';


export function $listTree(params) {

    return longAxios({
        url: `/lims/custom/listTree`,
        method: 'get',
        params,
        key: 'id',
        type: 'rows',
        receive: 'rows'
      });

}

4.正常调用就可以了

const res = await $customListData(this.queryParams)


http://www.kler.cn/a/456619.html

相关文章:

  • 常用的公共 NTP(网络时间协议)服务器
  • 易基因: BS+ChIP-seq揭示DNA甲基化调控非编码RNA(VIM-AS1)抑制肿瘤侵袭性|Exp Mol Med
  • Linux Ubuntu24配置安装Java
  • solr9.7 单机安装教程
  • UE5材质节点CameraDepthFade
  • 【每日学点鸿蒙知识】Shape描述、全局loading组件、checkbox样式、H5监听键盘收起、弹窗不关闭
  • 基于进程信号量的多线程同步机制研究与实现
  • Vue 3 与 Tauri 集成开发跨端APP
  • NLP 中文拼写检测纠正论文 Automatic-Corpus-Generation
  • ArcGIS Pro地形图四至角图经纬度标注与格网标注
  • 螺杆支撑座在运用中会出现哪些问题?
  • 微信流量主挑战:用户破16!新增文档转换(新纪元3)
  • CBSD管理QEMU仿真虚拟机
  • 穷举vs暴搜vs深搜vs回溯vs剪枝系列一>组合
  • 高效搭建Nacos:实现微服务的服务注册与配置中心
  • 字符串函数和结构题内存对齐
  • 虚幻引擎结构之ULevel
  • 小程序配置文件 —— 14 全局配置 - tabbar配置
  • 深度学习笔记(5)——目标检测和图像分割
  • 前端进阶之副作用的分析和控制
  • 微服务-1 认识微服务
  • 用命令行重启资源管理器(记录win解决找不到资源管理器问题)
  • 【 Git 设置代理】
  • upload-labs关卡记录8
  • Java基于SpringBoot的社区团购系统的设计与实现,附源码
  • Clickhouse使用基础