请求编写JavaScript代码:调用两个API接口并生成指定数组
没问题!我来帮你搞定这段JavaScript代码,同时把关键逻辑和注意事项给你梳理清楚~
解决方案:调用双API并合并结果数组
我推荐用async/await搭配Promise.all的方式来实现,这种写法代码清晰易读,还能并行发起两个API请求,比串行请求效率更高。下面是完整的实现代码:
async function getCombinedPressReleases() { try { // 并行发起两个API请求 const [localResponse, globalResponse] = await Promise.all([ fetch('/GetLocalPressReleases'), fetch('/GetGlobalPressReleases') ]); // 检查响应是否成功 if (!localResponse.ok || !globalResponse.ok) { throw new Error(`API请求失败:本地状态码${localResponse.status},全局状态码${globalResponse.status}`); } // 解析JSON数据 const localPressReleases = await localResponse.json(); const globalPressReleases = await globalResponse.json(); // 合并两个数组成一个新数组 const combinedPressReleases = [...localPressReleases, ...globalPressReleases]; // 或者用concat:localPressReleases.concat(globalPressReleases) return combinedPressReleases; } catch (error) { // 捕获并处理错误,避免程序崩溃 console.error('获取新闻稿时出错:', error); return []; // 出错时返回空数组,也可以根据需求调整 } } // 调用函数并使用结果 getCombinedPressReleases().then(combinedData => { console.log('合并后的新闻稿数组:', combinedData); // 这里可以继续处理合并后的数组,比如渲染到页面等 });
关键细节说明
- 并行请求:
Promise.all会同时发起两个请求,等待两个请求都完成后再继续执行,比先请求本地再请求全局的串行方式节省时间。 - 错误处理:用
try/catch包裹整个逻辑,同时检查response.ok确保API返回成功状态(200-299),避免解析失败的JSON导致报错。 - 数组合并:用扩展运算符
[...arr1, ...arr2]或者concat方法都可以合并数组,两者效果一致,选你习惯的写法就行。 - 兼容旧环境:如果需要支持不支持
async/await的旧浏览器,可以改用.then链式调用的写法:
function getCombinedPressReleases() { return Promise.all([ fetch('/GetLocalPressReleases'), fetch('/GetGlobalPressReleases') ]) .then(([localRes, globalRes]) => { if (!localRes.ok || !globalRes.ok) { throw new Error(`请求失败:本地${localRes.status},全局${globalRes.status}`); } return Promise.all([localRes.json(), globalRes.json()]); }) .then(([localData, globalData]) => { return localData.concat(globalData); }) .catch(error => { console.error('出错:', error); return []; }); } // 使用方式不变 getCombinedPressReleases().then(data => console.log(data));
如果两个API返回的数组结构不一样,你可能需要先对数据做统一处理再合并,比如映射成相同格式的对象,不过如果没这个需求的话上面的代码就完全够用啦~
内容的提问来源于stack exchange,提问作者user8930909
相关产品推荐
相关产品推荐

