Порядок виконання асинхронних функцій у JavaScript

3 Березня 2024 в 20:27 43

У світі сучасного веб-розробника асинхронність – це ключовий концепт. JavaScript, як мова програмування, пропонує потужні механізми для обробки асинхронних операцій, таких як обробка подій, виклики API та робота зі зворотними викликами. Одним з найбільш потужних інструментів у цій області є асинхронні функції. Однак, розуміння порядку їх виконання може бути важливим для ефективного програмування.

У JavaScript, коли ми працюємо з асинхронними функціями, основними інструментами є обіцянки (

Promise

Promise

) та ключове слово

async/await

1	async/await

. Обіцянки дозволяють нам працювати з асинхронним кодом шляхом реагування на результати виконання обіцянок, тоді як

async/await

1	async/await

надає зручний синтаксис для написання асинхронного коду, який виглядає майже як синхронний.

У цій статті ми розглянемо порядок виконання асинхронних функцій у JavaScript на прикладі використання

async/await

1	async/await

. В конкретному випадку, ми розглянемо, чому у певних ситуаціях функція з викликом

.then()

.then()

може виконатися перед виконанням певного коду, що знаходиться після цього виклику, навіть якщо за типовою поведінкою цей код має бути виконаний пізніше.

Давайте подивимося на конкретний код та з’ясуємо, чому це відбувається:

async function test(){
    console.log("start");
    console.log("going on...");
    await new Promise((resolve, reject) => {
        setTimeout(() => resolve("promise value"), 5000);
    })
    .then((result) => console.log(result))
    .catch((error) => console.log(error));
    console.log("still going on...");
}
test();
console.log("end.");

async function test(){

console.log("start");

console.log("going on...");

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

setTimeout(() => resolve("promise value"), 5000);

})

.then((result) => console.log(result))

.catch((error) => console.log(error));

console.log("still going on...");

}

test();

console.log("end.");

Вихідний результат цього коду виглядає наступним чином:

start
going on...
end.
promise value
still going on...

start

going on...

end.

promise value

still going on...

Що ж тут відбувається по-іншому і чому виклик

console.log("still going on...")

1	console.log("still going on...")

відбувається після виклику

.then()

.then()

, хоча за типовою поведінкою функція з викликом

.then()

.then()

повинна бути поміщена в мікростек спочатку, перед переходом до виконання коду звичайним стеком?

Причина відмінності полягає в порядку виконання мікрозадач та макрозадач у JavaScript. Коли ми маємо справу з асинхронним кодом, він поділяється на мікрозадачі та макрозадачі. Мікрозадачі, такі як обіцянки, виконуються після поточної макрозадачі, але до наступної. Тобто, коли ми використовуємо

await

await

, виклик

.then()

.then()

стає мікрозадачею, яка буде виконана після поточної макрозадачі.

Тому, після того, як пройшов час в очікуванні обіцянки, контроль повертається до основного стеку виклику, де виконується

console.log("still going on...")

1	console.log("still going on...")

. Після виконання цього, мікрозадача

.then()

.then()

виконується, що призводить до виводу “promise value”.

Таким чином, ми бачимо, що порядок виконання асинхронних функцій у JavaScript залежить від розуміння мікрозадач та макрозадач, що дозволяє нам зрозуміти, чому певні операції відбуваються у певному порядку, навіть якщо вони знаходяться у різних частинах нашого коду.