如何将多个RSS频道条目合并到同一页面而非分频道单独展示

需求说明 #

当前存在多个RSS频道，原有实现为每个频道单独占用一个页面展示内容，需要调整为所有RSS频道的条目合并后，统一在同一个页面中展示。

原有代码问题点 #

原有代码仅能获取单个RSS频道条目，无法实现聚合，核心问题如下：

• 循环发起请求时，每次都直接对this.xmlContent做全量赋值，后请求完成的频道内容会直接覆盖之前频道的内容，不会做数据累加
• Promise.all用法错误，未将所有请求实例封装为数组传入，没有实现等待所有请求完成后再统一处理的逻辑
• 存在变量拼写错误，打印日志时将xmlContent错写为xmlContect
• 缺少多源数据合并、统一排序的处理逻辑

修正后可运行代码 #

const urlsData = ['example1.xml','channel2.xml','example3.xml']

// 批量构造所有RSS源的请求任务
const feedRequestTasks = urlsData.map(feedPath => {
  return fetch(`https://rss.app/feeds/${feedPath}`)
    .then(response => response.text())
    .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
    .then(xmlData => {
      // 提取单个源下的所有内容条目
      return Array.from(xmlData.getElementsByTagName('item'))
    })
})

// 等待所有源请求完成后合并处理
Promise.all(feedRequestTasks)
  .then(feedItemGroups => {
    // 合并所有源的条目为单个数组
    const allMergedItems = feedItemGroups.flat()
    // 可选：按条目发布时间倒序排列，最新内容优先展示
    allMergedItems.sort((prev, next) => {
      const prevTime = new Date(prev.querySelector('pubDate')?.textContent || 0).getTime()
      const nextTime = new Date(next.querySelector('pubDate')?.textContent || 0).getTime()
      return nextTime - prevTime
    })
    // 赋值给渲染变量供页面展示
    this.xmlContent = allMergedItems
    console.log(this.xmlContent)
  })
  .catch(error => {
    console.error('RSS源加载异常：', error)
  })

实现逻辑说明 #

• 遍历RSS地址列表生成所有请求的Promise数组，传入Promise.all等待所有源数据全部返回后再做后续处理，避免数据覆盖问题
• 所有源返回的条目数组通过flat()打平为单个数组，实现多源内容合并
• 内置可选的按发布时间排序逻辑，合并后的内容可以按统一时间线展示，不会出现按源分块的割裂感
• 增加异常捕获逻辑，单个RSS源请求失败不会导致整个页面渲染崩溃
• 修正了原有代码的变量拼写错误

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