使用Axios+Cheerio爬取橄榄球排名表格仅能获取首行问题求助

原因说明 #

你的猜测正确，该站点的排名数据是客户端动态渲染的：Axios请求拿到的初始HTML里只有表格表头，剩余排名数据是页面加载后由JS异步拉取、再动态插入到DOM中的，Cheerio只能解析静态初始HTML，因此无法拿到其余行数据。

方案一：直接调用公开数据接口（最优） #

该站点排名数据有公开的结构化JSON接口，无需解析HTML，请求效率更高，你已经安装的Axios就可以直接请求：

const axios = require('axios')

async function getWorldRankings() {
  try {
    // 官方排名数据接口，返回最新全量排名数据
    const apiUrl = 'https://api.world.rugby/rankings/mru?date=latest'
    const { data } = await axios.get(apiUrl)
    
    // 直接取前10条排名数据即可
    const top10 = data.entries.slice(0,10)
    top10.forEach((item, idx) => {
      console.log(`排名${idx+1}：${item.team.name}，积分：${item.points}`)
    })
  } catch (err) {
    console.error(err)
  }
}

getWorldRankings()

方案二：使用无头浏览器渲染后抓取 #

如果需要基于原页面DOM做解析，可以用Puppeteer等无头浏览器工具，等待页面完全渲染后再提取内容：

1. 先安装依赖：npm install puppeteer
2. 参考代码：

const puppeteer = require('puppeteer')

async function getWorldRankings() {
  try {
    const browser = await puppeteer.launch({ headless: true })
    const page = await browser.newPage()
    // 等待页面所有网络请求完成、渲染结束
    await page.goto('https://www.world.rugby/tournaments/rankings/mru', {
      waitUntil: 'networkidle0'
    })

    // 提取前10行表格数据
    const top10 = await page.evaluate(() => {
      const rows = Array.from(document.querySelectorAll('div.fullRankingsContainer table tbody tr'))
      return rows.slice(0,10).map(row => {
        return Array.from(row.querySelectorAll('td')).map(col => col.textContent.trim())
      })
    })

    console.log(top10)
    await browser.close()
  } catch (err) {
    console.error(err)
  }
}

getWorldRankings()

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