javascript - 将异步/等待 block 中的部分代码提取到单独的函数中

Question

我有一个异步匿名自调用函数。函数前面的“async”一词意味着该函数将始终返回一个 promise 。如果代码中有 return，那么 JavaScript 会自动将其包装到具有该值的已解析 Promise 中。

这个异步允许我们使用“等待”。关键字await 使JavaScript 等待，直到promise 解决并返回其结果。因此，函数执行会“暂停”，并在 Promise 解决时恢复。这不会消耗任何 CPU 资源，因为引擎可以同时执行其他工作:执行其他脚本、处理事件等。

(async () => {
    await page.goto('test.com', { waituntil: ['load', 'domcontentloaded', 'networkidle0'] });
    await page.evaluate((user, pass) => {
      document.querySelector('#user').setAttribute('value', user);
    }, user, pass)
    await page.click('button[type=submit].btn-primary');


    for(var i = 0; i < 10; i++){
        try { 
            await page.goto('test.com/second', { waituntil: ['load', 'domcontentloaded', 'networkidle0'] });
        } catch(e) {
                await page.goto('test.com', { waituntil: ['load', 'domcontentloaded', 'networkidle0'] });
                await page.evaluate((user, pass) => {
                    document.querySelector('#user').setAttribute('value', user);
                }, user, pass)
                await page.click('button[type=submit].btn-primary');
        } 

        // more stuff not relevant here
    }    

})();

但是正如您在上面看到的，我有重复的代码。我想将重复的代码提取到一个单独的函数中。像这样的事情:

(async () => {

    logIn()

    for(var i = 0; i < 10; i++){
        try { 
            await page.goto('test.com/second', { waituntil: ['load', 'domcontentloaded', 'networkidle0'] });
        } catch(e) {
            logIn()
        } 

        // more stuff not relevant here
    }    

})();


function logIn(){
                await page.goto('test.com', { waituntil: ['load', 'domcontentloaded', 'networkidle0'] });
                await page.evaluate((user, pass) => {
                    document.querySelector('#user').setAttribute('value', user);
                }, user, pass)
                await page.click('button[type=submit].btn-primary');
}

但是，这行不通，因为await 只能在aysnc 内工作。现在一个想法是将await 放在logIn 调用前面，如下所示:

await logIn()            

但事情是这样的。在该 logIn 函数中，我特意使用了 3 次 wait，因为我需要在下一个语句之前解析一个语句。

我怎样才能实现这个目标？使用 async/await 并使用我的登录功能？

Answer 1

将您的 logIn 函数也设为异步函数:

async function logIn() {...}

然后，当您调用它时，await:

await logIn();

像这样:

async function logIn() {
  await page.goto('test.com', {
    waituntil: ['load', 'domcontentloaded', 'networkidle0']
  });
  await page.evaluate((user, pass) => {
    document.querySelector('#user').setAttribute('value', user);
  }, user, pass)
  await page.click('button[type=submit].btn-primary');
}

(async() => {
  await logIn();

  for (var i = 0; i < 10; i++) {
    try {
      await page.goto('test.com/second', {
        waituntil: ['load', 'domcontentloaded', 'networkidle0']
      });
    } catch (e) {
      logIn()
    }

    // more stuff not relevant here
  }
})();

More on async functions