本文主要是介绍前端精度问题 (id 返回的和传给后端的不一致问题),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
eg: 后端返回 id 10976458979374929
前端获取到的: 10976458979374928
原因:
js 中 Number类型范围-2^53 + 1 到 2^53 - 1
Number.isSafeInteger()用来判断一个整数是否落在这个范围之内。
java中 Long 类型的取值范围是-2^63 + 1 到 2^63 - 1, 比JavaScript中大很多,所以后端能正常处理。
解决方法:
方式1:数据库中存的就是数值型,修改数据库存的类型为字符串
方式2:返回接口时转为字符串类型给前端
方式1:
如果我们使用的是axios请求数据,Axios 提供了自定义处理原始后端返回数据的 API:transformResponse , 可以这样处理:
axios({
method: method,
url: url,
data: data,
transformResponse: [function (data) { // 将Long类型数据转换为字符串const convertedJsonString = data.replace(/"(\w+)":(\d{15,})/g, '"$1":"$2"'); return JSON.parse(convertedJsonString);
}],
})// 假设后端返回的JSON数据如下:
const responseData = {id: 12345678901234567890, // 这是一个Long类型数据name: "John Doe"
};// 处理过的json数据
console.log(responseData.id); // 这将输出字符串:"12345678901234567890"
console.log(typeof responseData.id); // 这将输出 "string"
方式2 : json序列化处理
使用JSON.parse()转换为JS对象,但是由于JS的Number的范围为,超出安全整数范围无法精确表示。
我们可以借助json-bigint这个第三方包来处理。
json-bigint中的parse方法会把超出 JS 安全整数范围的数字转为一个 BigNumber
类型的对象,对象数据是它内部的一个算法处理之后的,我们要做的就是在使用的时候转为字符串来使用。
通过启用storeAsString选项,可以快速将BigNumber转为字符串,代码如下:
import JSONbig from "json-bigint";axios({ method: method, url: url, data: data, transformResponse: [function (data) {
+ const JSONbigToString = JSONbig({ storeAsString: true });
+ // 将Long类型数据转换为字符串
+ return JSONbigToString.parse(data); }], })// 假设后端返回的JSON数据如下:const responseData = {id: 12345678901234567890, // 这是一个Long类型数据name: "John Doe"};// 处理过的json数据console.log(responseData.id); // 这将输出字符串:"12345678901234567890"console.log(typeof responseData.id); // 这将输出 "string
这篇关于前端精度问题 (id 返回的和传给后端的不一致问题)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!