如何用fetch获取多分类新闻API数据？代码报错求解决方案

你这段代码报错的核心问题是：fetch() 不能直接接收URL数组作为参数，它一次只能处理单个请求。要同时发起多个API请求，得用 Promise.all() 来批量处理异步请求。

修正步骤与代码示例 #

1. 批量创建请求Promise #

先把每个分类的URL都转换成独立的fetch请求（每个fetch返回一个Promise），然后用Promise.all()等待所有请求完成。

2. 逐个处理响应与数据解析 #

所有请求完成后，会得到一个响应数组，需要逐个检查每个响应的状态，解析JSON，再把不同分类的新闻数据整理好（可以按分类存储，方便后续展示）。

修正后的代码片段 #

// 定义要请求的所有分类URL
const categoryUrls = [
  GENERAL_NEWS + API_KEY,
  BUSINESS_NEWS + API_KEY,
  SPORTS_NEWS + API_KEY,
  TECHNOLOGY_NEWS + API_KEY,
  ENTERTAINMENT_NEWS + API_KEY
];

try {
  // 同时发起所有请求，等待全部完成
  const responses = await Promise.all(categoryUrls.map(url => fetch(url)));
  
  newsDataArr = [];
  // 逐个处理每个响应
  for (const response of responses) {
    if (response.status >= 200 && response.status < 300) {
      const data = await response.json();
      // 把当前分类的文章添加到总数组，也可以按分类存成对象，比如 { general: [...], business: [...] }
      newsDataArr.push(...data.articles);
    } else {
      console.log(`请求失败: ${response.status} ${response.statusText}`);
    }
  }

  // 如果需要按分类区分数据，也可以这样处理：
  // const categorizedNews = {};
  // const categories = ['general', 'business', 'sports', 'technology', 'entertainment'];
  // for (let i = 0; i < responses.length; i++) {
  //   const res = responses[i];
  //   if (res.ok) {
  //     const data = await res.json();
  //     categorizedNews[categories[i]] = data.articles;
  //   }
  // }

  displayNews();
} catch (error) {
  // 处理网络层面的错误（比如请求连不上服务器）
  console.error('请求出错:', error);
  newsdetails.innerHTML = "<h5>数据加载失败，请稍后重试。</h5>";
}

关键说明 #

• Promise.all() 会等待所有传入的Promise都完成，才会继续执行，只要有一个请求失败（抛出错误），就会进入catch块。如果想允许部分请求失败、不影响其他请求，可以用 Promise.allSettled()，然后在结果里过滤成功的响应。
• 如果你需要保留新闻的分类信息，建议把数据整理成键值对形式（比如{ 综合: [...], 财经: [...] }），这样后续展示时能区分不同分类的新闻。

内容的提问来源于stack exchange，提问作者Austn Yang