Що таке await насправді і як він “розшифровується” в callback?

await — не окрема команда “почекай”. Спрощено це можна уявити як синтаксис, що бере весь код нижче і “прикріплює” його як callback до Promise через .then():

TypeScript — те що ти пишеш vs те, у що це ментально перетворюється

// Пишеш:
await page.click('button.checkout');
await page.locator('.confirmation').waitFor();

// Ментально можна уявити як:
page.click('button.checkout').then(function callback1() {
  return page.locator('.confirmation').waitFor();
});

Де саме проходить межа callback: до найближчого наступного await, а якщо його немає — до кінця функції. Не буквально “наступний рядок” — між двома await може бути кілька синхронних рядків (console.log, обчислення), і всі вони потрапляють в один і той самий callback:

TypeScript — де саме проходить межа

await page.click('button.checkout');
// ↑ МЕЖА починається тут

console.log('після кліку');
// ↑ це все ще той самий callback1

await page.locator('.confirmation').waitFor();
// ↑ МЕЖА закінчується тут — бо зустрівся наступний await

Саме тому в першому прикладі waitFor() опинився всередині callback1: між першим і другим await не було жодного проміжного рядка, тож callback1 склався виключно з виклику waitFor() — межа шукала наступний await, знайшла його одразу, і більше нічого туди не потрапило.

Callback — не окрема пауза “подумати”. Це просто “шматок коду, викликаний пізніше”. Що саме він робить, коли його викликають — залежить від того, чи є що передавати:

  • Є значення для передачі — const price = await locator.textContent(). Callback отримує реальний текст і кладе його в змінну.
  • Нема що передавати — await click(); await waitFor();. click() не повертає нічого змістовного, тому callback1 просто запускає наступну дію, нічого не “отримуючи” з попередньої.

🔧 Ключова фраза, варта запам’ятати дослівноCallback — завжди “шматок коду, викликаний пізніше”. Іноді він одразу використовує передане значення — коли є що передавати. Іноді він просто запускає наступну дію без жодного значення — коли передавати нічого. Обидва випадки — той самий механізм, просто з різним вмістом усередині.

🗣 Як читати вголосAwait не окрема команда почекай, це синтаксис який каже: візьми весь код що йде нижче і оберни його в callback, приліплений до Promise через then. Межа цього callback проходить до найближчого наступного await, а якщо його немає — до кінця функції, і це не буквально наступний рядок, бо між двома await може бути кілька синхронних рядків, і всі вони потрапляють в один і той самий callback. Callback сам по собі — це завжди просто шматок коду, викликаний пізніше, і головне тут не плутати дві ситуації. Якщо асинхронна функція повертає значення, callback це значення отримує і використовує. Але якщо повертати нічого змістовного, як у click, callback просто запускає наступну дію, без жодного переданого значення. Це той самий механізм в обох випадках, просто з різним вмістом усередині callback.