Question

我对page.waitForNavigation有点困惑，我知道它是什么，它是做什么的，但是我基于Internet速度获得了不同的结果（这就是我认为的因素）

想象一下此代码

    await page.$eval('#username', (el , setting ) => el.value = setting.username , setting );
    await page.$eval('#password', (el , setting ) => el.value = setting.password , setting );
    await page.$eval('form', form => form.submit());
    await page.waitForNavigation();
    await page.goto( 'http://example.com/dashboard'  );

它填写登录表单，提交登录表单，等待表单提交，然后重定向到仪表板

这在我的本地主机上工作正常，该主机的互联网速度较慢（与服务器相比），但是当我将其上传到服务器时，我得到了

Error: Navigation Timeout Exceeded: 30000ms exceeded

在服务器上，如果我从代码中删除await page.waitForNavigation();并重定向到仪表板

但是现在在localhost上，我可以重定向到仪表板，然后才能提交表单……所以我得到you cant see dashboard , your not logged in或类似的东西

我认为决定因素是互联网的速度

在服务器上，我的速度非常快，因此可以立即提交表单并在await page.waitForNavigation()行之前完成表单，因此我会出现导航超时错误

但是在速度较慢的localhost上需要提交更多时间，因此提交表单后我需要await page.waitForNavigation()，否则我将重定向到仪表板，然后才有提交表单的机会

因此，我正在寻求具有丰富经验的人提供有关如何处理这种情况的建议，这是正确的；我知道我在服务器或本地主机上运行时仍在编辑我的代码……这确实很烦人！

使用

后

async function open_tab( setting ){

    const page    = await global_browser.newPage();
    await page.setViewport({ width: 1000, height: 768});


    return await new Promise(async (resolve, reject ) => {

        await page.$eval('#username', (el , setting ) => el.value = setting.username , setting );
        await page.$eval('#password', (el , setting ) => el.value = setting.password , setting );

    await Promise.all(
     page.$eval('form', form => form.submit()),
     page.waitForNavigation()
    )


        await page.goto( 'http://example.com/dashboard'  );



    resolve();

}).then(() => {

        console.log( ' -> don!  '  );
        page.close();

    })
    .catch(() => {

        console.log( ' -> somethign went wrong !');
        page.close();

    })


}

我得到

(node:14812) UnhandledPromiseRejectionWarning: TypeError: undefined is not a function
    at Function.all (<anonymous>)
    at Promise (D:\wamp\www\gatewayCard\robot\server.js:287:23)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
(node:14812) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)
(node:14812) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Answer 1

之所以发生，是因为导航可能会在您等待之前提交时发生。

使用Promise.all在一个promise中使用submitt和waitForNavigation，因此它将等待两个而不是一次。

await Promise.all(
 page.waitForNavigation(),
 page.$eval('form', form => form.submit())
)

或

await Promise.all(
 page.$eval('form', form => form.submit()),
 page.waitForNavigation()
)

两者都应该起作用。

编辑1：

您的主要问题完全没有进行修改。您没有在代码中使用适当的async ... await。这是一个更好的代码。

async ... await函数的优点在于您可以减少代码编写，并提高可读性和可维护性。这是一把双刃剑，但如果使用得当，则值得。

async function open_tab(setting) {
  try {
    const page = await global_browser.newPage();
    await page.setViewport({
      width: 1000,
      height: 768
    });
    await page.goto('http://example.com/dashboard');
    await page.$eval('#username', (el, setting) => el.value = setting.username, setting);
    await page.$eval('#password', (el, setting) => el.value = setting.password, setting);
    await Promise.all(page.$eval('form', form => form.submit()), page.waitForNavigation());
    console.log(' -> don!  ');
    await page.close();
  } catch (error) {
    console.log(' -> somethign went wrong !', error);
    await page.close();
  }
}

编辑2：

在您的代码中，

return await new Promise(async (resolve, reject ) => {

这在许多步骤上都是错误的。异步函数无论如何都会返回一个promise，因此您要在一个promise中返回一个promise，而不会捕获它并对其使用wait。尽早检查代码，否则很快就会遇到巨大的问题。

看来您应该先了解更多有关异步等待的知识。这是一些对您有用的链接，这些链接将说明超时以及您想学习的所有内容。

在puppeteer中使用page.waitForNavigation的正确方法

1 个答案: