【vue】vue给接口传参，数字太长后会失真

在 Vue.js 中向后端接口传递长数字时，数字可能会出现失真的情况，主要原因是 JavaScript 中数字的表示范围和精度限制。JavaScript 使用 IEEE 754 的双精度浮点数标准来表示数字，这意味着它可以精确地表示从大约 ±2^−53 到 ±2^53 的整数，超过这个范围的整数可能会因为精度损失而无法准确表示。

例如，当你尝试传递一个非常大的数字时，JavaScript 可能会将其转换为科学记数法，从而导致失真。这在前端表单数据、URL 参数、或者 AJAX 请求的参数中尤其明显。

为了避免这种失真，可以采取以下几种策略：

1、使用字符串传递数字:
将数字转换为字符串形式，然后传递。这样可以确保原始数字的完整性。

const number = 12345678901234567890;
axios.post('/api/endpoint', { num: number.toString() });

2、使用BigInt类型:
如果你的环境支持 BigInt（例如，现代浏览器和 Node.js v10+），可以使用 BigInt 类型来处理大整数。

const bigNumber = BigInt(12345678901234567890);
axios.post('/api/endpoint', { num: bigNumber.toString() });

3、后端处理:
在后端，确保你的服务器能够正确处理长数字。这可能意味着使用适当的数据类型，如 Python 中的 long 类型或 Node.js 中的 BigInt 类型。
4、JSON 序列化和反序列化:
当使用 JSON.stringify() 或者 JSON.parse() 处理包含大数字的对象时，可以使用 replacer 和 reviver 函数来保持数字的完整性。

const obj = { bigNum: 12345678901234567890 };
const jsonString = JSON.stringify(obj, (key, value) => typeof value === 'number' ? value.toString() : value);
const parsedObj = JSON.parse(jsonString, (key, value) => typeof value === 'string' && !isNaN(value) ? BigInt(value) : value);

注意：BigInt 类型不能与普通数字混合使用，例如加减运算，因为它们是不同的类型。使用 BigInt 进行算术运算时，必须确保所有操作数都是 BigInt 类型。

选择哪种方法取决于你的具体需求和环境。在大多数情况下，将大数字作为字符串传递是一种简单有效的方法。