javascript - Puppeteer 响应不返回 css 文件

Question

我试图返回完整的 css 响应并保存到文件中，但它返回一些奇怪的对象: 这是我的代码:

const puppeteer = require('puppeteer'),
    fs = require('fs');
const JSON = require('circular-json');

function run (url) {
    return new Promise(async (resolve, reject) => {
        try {
            const browser = await puppeteer.launch();
            const page = await browser.newPage();

            var allCSS = [];
            let css = await page.on('response', async response => {
                if(response.request().resourceType() === 'stylesheet') {
                    return JSON.stringify(response.text());
                }
            });
           let body = await page.evaluate(() => {
               return items = document.getElementsByTagName('#Id');
           })

            await page.goto(url);
            await browser.close();
            return resolve({body: body, css: css});
        } catch (e) {
            return reject(e);
        }
    })
}
run("http://localhost/gogo/test.html")
    .then((css)=>{
        //var css = JSON.stringify(body.css);
        fs.writeFile('data/css/first.css', css, 'utf8', function(){
            console.log("CSS DONE")
        });
    }).catch(console.error);

现在的问题是它返回一个对象，其中包含诸如 events...、_connection... 之类的所有内容，并且它现在是一个巨大的 json 文件？我如何只获取样式表

Answer 1

response.text()返回一个 Promise，而不是实际的文本本身。您需要等待这个 promise 的结果，如下所示:

return JSON.stringify(await response.text());

但是，我认为还有另一个问题。据我所知，你不能等待事件发生；你必须等待事件发生。您只能为事件创建回调。因此，这段代码本质上是不正确的:

let css = await page.on(...

解决这个问题应该不会太困难。您需要做的是注册事件回调，类似于您的操作方式:

page.on('response', async response => {
    if(response.request().resourceType() === 'stylesheet') {

但是，在回调内部，您应该解决 promise :

        resolve(JSON.stringify(await response.text()));

或者，如果您想要捕获多个样式表，则需要将 CSS 添加到列表中。然后，在达到某个阈值(时间、捕获的样式表数量等)后，您可以使用所有 CSS 列表来解决 promise 。

最终代码(仅适用于一个样式表)应如下所示:

try {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    page.on('response', async response => { // don't await anything on this line
        if(response.request().resourceType() === 'stylesheet') {
            resolve(JSON.stringify(await response.text())); // await and resolve here
        }
    });

    await page.goto(url);
    await browser.close();
    // don't resolve here
} catch (e) {
    return reject(e);
}