javascript - 如何在 page.goto 函数中为每个请求设置超时选项

Question

我使用puppeteer从页面抓取资源，但由于连接超时，其中一个请求没有成功，并且它长时间阻塞了page.goto('url')函数。我想跳过这个请求，继续下一步请求。我需要为每个请求设置超时，但不需要在 page.goto 函数上设置总超时选项。

以下是我的代码 test.js:

const browser = await puppeteer.launch();
const page = await browser.newPage();
page.on('request', request => {
    console.log(request.url())
})
await page.goto(process.argv[2], {timeout: 10000}).then( () => {
}, () => {
    console.log("timeout");
}); 
browser.close();

node test.js http://ipv6ready.wanwuyunlian.com:8080/

http://ipv6ready.wanwuyunlian.com:8080/  
http://ipv6ready.wanwuyunlian.com:8080/js/bootstrap.min.js
http://ipv6ready.wanwuyunlian.com:8080/js/echarts/echarts.min.js
https://www.google-analytics.com/analytics.js    
http://ipv6ready.wanwuyunlian.com:8080/js/echarts/macarons.js
https://www.google-analytics.com/analytics.js 

由于连接超时，analytics.js 请求非常慢；这会长时间阻塞 page.goto ，剩余的资源将不会被请求，我想中止此请求并继续请求剩余的资源。

Answer 1

有两种方法可以解决这个问题。第一种是使用 networkidle2(“当至少 500 毫秒内没有超过 2 个网络连接时，考虑完成导航”)而不是默认的 networkidle0，以便最多两个请求可以变慢而不影响您的代码:

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(process.argv[2], {waitUntil: "networkidle2"}).then( () => {
}, (e) => {
    console.error("Error", e);
}); 
browser.close();

或者，要对单个页面请求实现超时，我建议使用超时模块，例如 p-timeout:

const pTimeout = require("p-timeout");

const shorterTimeout = 10000;
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setRequestInterception(true);
page.on('request', async (request) => {
    if (!shouldImplementTimeout(request.url())) {
        await request.continue();
    }

    await pTimeout(request.continue(), shorterTimeout)
        .catch((e) => {
            console.error(request.url(), "failed:", e);
            await request.abort("timedout");
        });
})
await page.goto(process.argv[2]).then( () => {
}, (e) => {
    console.error("Error", e);
}); 
browser.close();

您需要编写shouldImplementTimeout，如果请求需要更短的超时，它应该返回true。