接口中参数id值,每次返回的都不一样

在开发过程中遇到数值型ID因长度过长导致精度缺失的问题,每次接口返回的ID值不一致。经排查发现,原因是后端Java代码处理长数字时出现精度丢失。解决方案为将后端输出的int类型字段改为string类型。

今天开发中碰到怪异的现象:

有个值接口调用后,id每次都不一样。

原因:

查看原因是因为,这个id值是数字,当数字太长后精度会缺失。(后端java代码中就已经精度缺失,所以输出时就每次都不一样)

解决方式:

只要后端输出的字段int改成string就行

在浏览器中同时调用多个相同的接口(仅参数同)时,如果每个接口都独立调用,可能会导致以下性能问题: - **网络开销大**:每次请求都需要建立连接、发送请求、等待响应,重复的网络请求会增加整体延迟。 - **服务器压力大**:服务器需要处理多个请求,资源消耗高。 - **用户体验差**:页面加载时间长,响应及时。 ### 优化方案 #### 1. **后端接口合并** 最有效的优化方式是让后端提供一个“批量查询”接口,可以一次接收多个参数返回多个结果。 例如,前端原本发送10个请求,每个请求参数是 `id=1`、`id=2`...`id=10`,我们可以合并成一个请求: ```javascript fetch('/api/getBatchData', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ids: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }) }) .then(res => res.json()) .then(data => { console.log('批量数据:', data); }); ``` 这样只需要一次网络请求,大大减少了网络开销。 --- #### 2. **前端缓存相同请求** 如果无法修改后端接口,可以在前端对相同的请求做缓存,避免重复请求。 ```javascript const cache = {}; function fetchData(id) { if (cache[id]) { return Promise.resolve(cache[id]); } return fetch(`/api/getData?id=${id}`) .then(res => res.json()) .then(data => { cache[id] = data; return data; }); } // 调用10个请求 const promises = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(fetchData); Promise.all(promises).then(results => { console.log('所有结果:', results); }); ``` --- #### 3. **使用并发控制(Promise Pool)** 如果必须发送多个请求,并且能合并接口,可以控制并发数量,避免同时发送10个请求造成阻塞。 ```javascript function promisePool(tasks, concurrency) { let index = 0; const results = []; let resolvingCount = 0; return new Promise((resolve, reject) => { function run() { while (resolvingCount < concurrency && index < tasks.length) { const task = tasks[index++]; resolvingCount++; task() .then(res => { results.push(res); resolvingCount--; if (index < tasks.length) run(); else if (resolvingCount === 0) resolve(results); }) .catch(err => reject(err)); } } run(); }); } // 示例:并发数量为3 const tasks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(id => () => fetch(`/api/getData?id=${id}`).then(res => res.json()) ); promisePool(tasks, 3).then(results => { console.log('并发控制结果:', results); }); ``` --- #### 4. **使用 Web Worker 或 Service Worker 缓存/预加载** 对于一些非关键路径的请求,可以使用 Web Worker 或 Service Worker 提前加载数据,避免阻塞主线程。 --- ### 总结 | 优化方式 | 优点 | 适用场景 | |----------|------|----------| | 后端接口合并 | 最高效 | 可修改后端 | | 前端缓存 | 简单有效 | 能改后端但请求重复 | | 并发控制 | 控制资源占用 | 必须并发请求 | | Web Worker / Service Worker | 提升体验 | 需要预加载或后台处理 | ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时光机上敲代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值