Puppeteer XMLHttpRequest inside page.evaluate is blocking code

Question

I am trying to do a GET request inside the page to get some data asynchronously, but the page.goto always gets blocked and waits till the GET request finishes before being executed.

var requestSite = "https://somerequest.com";
// something
return await page.evaluate(async requestSite => {
    return await new Promise(resolve => {
        var req = new XMLHttpRequest();
        req.open("GET", requestSite, true);
        req.onload = () => {
            if (req.status === 200) {
                resolve(req.responseText);
            }
        };
        req.send();
    });
}, requestSite);

Answer 1

You can just return the promise

return await page.evaluate(requestSite => {
    return new Promise(resolve => {
        var req = new XMLHttpRequest();
        req.open("GET", requestSite, true);
        req.onload = () => {
            if (req.status === 200) {
                resolve(req.responseText);
            }
        };
        req.send();
    });
}, requestSite);

Answer 2

To make it non-blocking, you need to drop all the "return await" in the function that uses page.evaluate<\/code> (as stated in this response https:\/\/stackoverflow.com\/a\/59564391\/3482730<\/a> ), and drop the await<\/code> when you call it:

async function doesPageEvaluate() {
    return page.evaluate(requestSite => {
        return new Promise(resolve => {
            var req = new XMLHttpRequest();
            req.open("GET", requestSite, true);
            req.onload = () => {
                if (req.status === 200) {
                    resolve(req.responseText);
                }
                else {
                    reject(req);
                }
            };
            req.send();
        });
    }, requestSite);
}

...

doesPageEvaluate(); // next line will be executed before this finishes
await page.goto("https://somesite.com");