Извлечь часть кода из блока async / await в отдельную функцию

Question

У меня есть асинхронная анонимная функция, вызывающая себя. Слово «асинхронный» перед функцией означает, что функция всегда возвращает обещание. Если в коде есть возвращаемый код, JavaScript автоматически превращает его в разрешенное обещание с этим значением.

Этот асинхронный режим позволяет нам использовать «ожидание». Ключевое слово await заставляет JavaScript ждать, пока это обещание не выполнится и не вернет свой результат. Таким образом, выполнение функции «приостанавливается» и возобновляется после выполнения обещания. Это не требует затрат ресурсов процессора, потому что движок может выполнять другие задачи: выполнять другие сценарии, обрабатывать события и т. Д.

(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');
}

Однако это не сработает, потому что ожидание работает только внутри aysnc. Теперь одна идея состоит в том, чтобы поместить ожидание перед вызовом входа в систему следующим образом:

await logIn()            

Но вот в чем дело. Внутри этой функции logIn я специально использую await 3 раза, потому что мне нужно разрешить одно утверждение до следующего.

Как мне этого добиться? Использовать 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
  }
})();

Подробнее об асинхронных функциях