Async JavaScript: jak silnik wykonuje twój asynchroniczny kod

JavaScript ma jeden wątek, ale potrafi czekać na wiele rzeczy równocześnie. Sekret to event loop - prosty algorytm, który wybiera, co odpalić, gdy stack jest pusty. Microtaski wyprzedzają taski, render wpasowuje się między cyklami, a kolejność wykonania zaczyna mieć logiczny sens.

Async w JS bez Promise to callback hell - kod nie ma jak odwoływać się do trwającej operacji, a obsługa błędów siedzi osobno w każdym callbacku. Promise to obietnica wartości, która przyjdzie później - kod układa się płasko, a błędy łapiesz w jednym miejscu.

async/await wygląda jak magia: piszesz await fetch(...), dostajesz wynik w kolejnej linijce, a wątek nie blokuje się ani na moment. Pod spodem nie ma magii - jest stary wzorzec generator + Promise + auto-runner, ukryty pod nowymi słowami async i await.

Zwykła funkcja w JS leci od góry do dołu, zwraca wynik i znika z pamięci. Generator jest inny - oznaczony function*, na każdym yield zatrzymuje swoje wykonanie, oddaje wartość i czeka na kolejne .next(). Mała zmiana w runtime, ale to ona stoi za sekwencjami liczonymi na żądanie i pod spodem async/await.