如何使用 Cheerio 抓取动态网站？答案

【问题标题】：How do I use cheerio to scrape dynamic websites?如何使用 Cheerio 抓取动态网站？
【发布时间】：2021-01-04 13:16:51
【问题描述】：

首先，请理解使用翻译器可能会导致语法不正确。

我将在 React 环境中使用 Cheerio 进行网页抓取。

网站的一部分（例如）：

<ul>
  <li>
    <div class="name">burger</div>
    <div class="price">5,500</div>
  </li>
  <li>
    <div class="name">sandwich</div>
    <div class="price">3,500</div>
  </li>
  <li>
    <div class="name">ramyeon</div>
    <div class="price">1,500</div>
  </li>
</ul>

我的代码（仅供参考，此代码在抓取其他网站时效果很好）：

const cheerio = require("cheerio");
let prodData = [];

useEffect(() => {
    scraping();
}, []);

const scraping = () => { 

     axios.get("/product/thisIsExample")
        .then(res => {
            if (res.status === 200) {
                const html = res.data;
                const $ = cheerio.load(html);
                const children = [...$("ul").children("li")];
                children.forEach(v => {
                    prodData.push({
                        prodName: $(v).find("div.name").text(),
                        prodPrice: $(v).find("div.price").text()
                    });

                });
                
                if(prodData.length !== 0) {
                    console.log(prodData);
                }
            }
        }, (err) => console.log("error"));

}

问题是我试图抓取的部分（

）是动态的，所以只有在数据调用完成后才会生成。

我的意思是，我试图将

从

。
我应该怎么做才能刮
？

【问题讨论】：

页面不可能通过脚本动态填充这些项目。我建议您在加载完成后刮掉页面。 $(window).on('load', function() { // 定义 const scraping=() => {... here });如果失败了，你可以添加一个粗略的计时器，在一段时间后开始抓取。
也许cheerio 不能处理这种情况。您可以尝试使此功能异步，等待一段时间并再次发出请求，或使用基于 selenium webdrive 的刮刀。
您想使用 puppeteer 或 jsdom 并等待 xhrs 完成。

标签： javascript reactjs web-scraping axios cheerio

【解决方案1】：

动态页面在加载后可以很好地创建可见内容 - 从服务器读取 html 会得到一些基本结构和脚本标签，但不会获得由该页面中的脚本生成并最终被用户看到的内容。

要抓取动态网页，您需要 selenium 之类的东西并自动化真实浏览器。

【讨论】：