时间戳

首页 > 解决方案 > 使用 Puppeteer 为图像抓取无限滚动网页，但在等待异步中不返回任何内容

javascript - 使用 Puppeteer 为图像抓取无限滚动网页，但在等待异步中不返回任何内容

问题描述

所以我正在使用 node.js 和 Puppeteer 尝试从无限滚动的网页中抓取一定数量的图像 URL（我只是使用 reddit 主页进行测试，但如果你愿意，可以替换为你自己的），但是应该容纳它们的数组现在是空的。

我什至把它全部放在一个匿名异步函数中，这样我就可以强制它await，以防时间问题：

const puppeteer = require('puppeteer');

var pBrowser = await puppeteer.launch();
console.log("\t* Browser launched");
var pPage       = await pBrowser.newPage();
console.log("\t* Page launched");

let sUrl = foo;
await pPage.goto(sUrl);

let iItemCount = 10;
let tImageSrcs = [];
await async function () {
    let iPreviousHeight;
    console.log("Starting search at the top");
    while (tImageSrcs.length < iItemCount) {
        tImageSrcs = await pPage.evaluate( function() {
            let tItems = Array.from(document.images, e => e.src );
            console.log("\t\t* "+tItems.length+" images overall found within this section; trimming...");
            tItems = tItems.filter( sImage => [".jpg",".png"].includes(sImage.substring(sImage.length-4)) );
            console.log("\t\t* "+tItems.length+" images after filtering");
            return tImageSrcs.concat(tItems);
        });
        console.log("\t* "+tImageSrcs.length+" appropriate images sourced so far...");
        iPreviousHeight = await pPage.evalutate("document.body.scrollHeight");
        await pPage.evaluate('window.scrollTo(0, document.body.scrollHeight)');
        console.log("Searching at scroll height "+iPreviousHeight);
        await pPage.waitForFunction(`document.body.scrollHeight > ${iPreviousHeight}`);
        await page.waitFor(1000);
    }
};
console.log("\t* "+tImageSrcs.length+" images sourced");

但似乎它甚至没有在 async 函数中调用任何东西，因为无论它是否能够找到任何图像，输出甚至都不包含任何console.log语句，包括位于（几乎）最顶部的语句异步函数：

        * Browser launched
        * Page launched
        * 0 images sourced

标签： javascriptnode.jsweb-scrapingasync-awaitpuppeteer

解决方案

一些注意事项：

  1. 您创建了异步函数，但您没有调用它，因此它没有被执行：
await async function () { /*...*/ }

应该：

await async function () { /*...*/ }()

  1. 无论如何，这个包装器函数是多余的：我想你在使用时已经在一个异步函数中await，所以不需要使用包装器。

  2. 你调用console.log("\t* "+tImageSrcs.length+" images sourced");whentImageSrcs仍然是空的，因为上面的函数没有被执行（await只是等待它的创建，而不是执行）。

  3. tImageSrcs内部pPage.evaluate()代码未定义（tImageSrcs在 Node.js 上下文中是一个变量，在浏览器上下文中不可用）。您需要通过其可序列化的值来传输它。

所以试试这个变种：

const puppeteer = require('puppeteer');

var pBrowser = await puppeteer.launch();
console.log("\t* Browser launched");
var pPage       = await pBrowser.newPage();
console.log("\t* Page launched");

let sUrl = foo;
await pPage.goto(sUrl);

let iItemCount = 10;
let tImageSrcs = [];

let iPreviousHeight;
console.log("Starting search at the top");

while (tImageSrcs.length < iItemCount) {
    tImageSrcs = await pPage.evaluate( function(srcs) {
        let tItems = Array.from(document.images, e => e.src );
        console.log("\t\t* "+tItems.length+" images overall found within this section; trimming...");
        tItems = tItems.filter( sImage => [".jpg",".png"].includes(sImage.substring(sImage.length-4)) );
        console.log("\t\t* "+tItems.length+" images after filtering");
        return srcs.concat(tItems);
    }, tImageSrcs);
    console.log("\t* "+tImageSrcs.length+" appropriate images sourced so far...");
    iPreviousHeight = await pPage.evalutate("document.body.scrollHeight");
    await pPage.evaluate('window.scrollTo(0, document.body.scrollHeight)');
    console.log("Searching at scroll height "+iPreviousHeight);
    await pPage.waitForFunction(`document.body.scrollHeight > ${iPreviousHeight}`);
    await page.waitFor(1000);
}

console.log("\t* "+tImageSrcs.length+" images sourced");

推荐阅读