Чому молодші розробники плутаються з асинхронним кодом (і як навчитися працювати з ним) - javascript.org.ua

Зображення створене за допомогою DALL-E

Асинхронне програмування — це одна з найскладніших, але водночас найважливіших тем у сучасній розробці, особливо в веб-розробці. Якщо поглянути на найбільш поширені труднощі початківців (і не тільки початківців), однією з частих скарг є незрозумілість того, що відбувається "під капотом", чому код "стрибає" і не дає передбачуваних результатів, або чому програма не чекає, поки функція завершить роботу.

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

Оригінальна стаття російською: [**Посилання на статтю в Хабрі*](https://habr.com/ru/articles/871328/)
*Це офіційний англійський переклад моєї статті._**

Приємного читання!

Що таке асинхронна модель?

Однопотокова модель і цикл подій

У веб-розробці (наприклад, у JavaScript) часто можна почути: "JS — однопотокова мова, але здатна до асинхронного виконання". Це означає, що JavaScript обробляє код в одному потоці, виконуючи дії послідовно. Але чому тоді є setTimeout, fetch, події та все інше, що працює у фоновому режимі?

Вся суть у подієво-орієнтованій моделі (Event Loop). Коли ми запускаємо асинхронну функцію (наприклад, мережевий запит), JavaScript передає завдання в движок або до спеціальних системних бібліотек, які можуть працювати паралельно або поза основним потоком. Коли завдання готове (наприклад, отримано відповідь від сервера), движок ставить callback в чергу, і він буде виконаний лише коли інтерпретатор досягне цього події в циклі подій.

Потоки і черги в інших мовах

Різні мови вирішують асинхронність різними способами. Деякі використовують систему воркерів (worker threads), інші дозволяють управляти потоками безпосередньо. Але головна ідея полягає в тому, що асинхронний код не блокує всю програму під час тривалих операцій (I/O, мережеві запити, читання файлів тощо).

Важливо зрозуміти: асинхронність сама по собі не обов'язково означає паралелізм на рівні потоків. Потрібно розрізняти:

Асинхронне виконання (код не блокується під час очікування операцій).
Паралельне виконання (завдання фактично виконуються одночасно на кількох ядрах).

Чому початківці стикаються з труднощами?

Плутанина з порядком виконання

Основна проблема полягає в тому, що ми звикли до послідовного мислення — спочатку виконується одне, потім інше. Асинхронний код ламає цю логіку, тому що операції можуть завершуватися в непередбачуваному порядку. Якщо junior-розробник не розуміє, що виклик функції "додає завдання в чергу" і що callback виконається пізніше, то його мозок ламається — наша звична ланка "що буде далі" руйнується.

Приклад на JavaScript:

console.log("Start");  
setTimeout(() => {  
 console.log("Timeout");  
}, 0);  
console.log("End");

Початківець зазвичай очікує:

Start  
Timeout  
End

Але насправді ми отримаємо:

Start  
End  
Timeout

Це відбувається, тому що setTimeout з нульовою затримкою також потрапляє в чергу, і рядок End виконується до того, як буде оброблено callback таймера.

Нерозуміння механізмів (Callback, Promises, async/await)

Callback: Коли у нас є багато вкладених callback, код починає зміщуватися вправо (callback hell), і його стає важко читати. Початківці часто не можуть зрозуміти, який callback належить до якої операції і що насправді повертається.
Promises: Promise дає зручніший синтаксис, щоб уникнути глибокого вкладення.
Але вам справді потрібно "зрозуміти", як це працює: коли обіцянка знаходиться в стані pending, хто змінює її на fulfilled або rejected, і в який момент спрацьовує then() або catch().
async/await: Це виглядає майже як синхронний код, але "під капотом" це все та сама логіка обіцянок з callback. Якщо junior-розробник не розуміє, як працюють обіцянки, то async/await може створити ще більше ілюзії "синхронної" поведінки, що може призвести до помилок.

Очікування vs. Реальність

Початківці часто думають, що написання await fetch(...) означає, що код зупиниться і чекає на відповідь. Зовні це дійсно схоже на синхронне виконання в мові, яка просто виконує функцію. Але пам'ятайте, що під капотом це все ще асинхронно, і якщо де-небудь трапиться помилка, або якщо ми забудемо поставити await, результат може прийти не тоді й не так, як ми очікуємо.

Як вивчити асинхронну модель

Зрозумійте, що таке черга подій

Перший крок — усвідомити, що будь-яка асинхронна операція не виконується миттєво і не блокує основну програму. Натомість щось у движку або бібліотеках ініціює операцію, яка після завершення додає новий callback (або подію, або обіцянку) в чергу. Движок виконує цей callback тільки тоді, коли дійде до цього елемента в черзі.

Перегляньте популярні відео або прочитайте статті про цикл подій (наприклад, "How JavaScript Event Loop Works") або схожі механізми в інших мовах.

Коли у вас буде чітка уявлення, що "є черга, в яку ставляться завдання", багато запитань зникнуть.

Відчуйте асинхронність через прості експерименти

Щоб справді зрозуміти, як код не завжди виконується в тому порядку, який ми припускаємо, корисно писати найпростіші програми і додавати console.log (або еквівалентний логінг) безпосередньо всередині та між callback:

console.log("1");  
setTimeout(() => console.log("2"), 0);  
console.log("3");

Попрацюйте з такими прикладами, і ви побачите, чому результат 1,3,2 — це нормальна поведінка, а не якась дивна помилка.

Щоб глибше зануритися, спробуйте кілька вкладених асинхронних викликів:

console.log("A");  
setTimeout(() => {  
 console.log("B");  
 setTimeout(() => {  
 console.log("C");  
 }, 100);  
}, 100);  
console.log("D");

Тут ви побачите, що D виводиться одразу після A, а ось B і C з’являються пізніше. Порядок — A, D, B, C.

Ви також можете переглянути візуалізацію асинхронності тут: https://www.jsv9000.app/

Відслідковуйте стани обіцянок і налагоджуйте

Якщо ви працюєте з обіцянками, вам потрібно навчитися спостерігати:

Коли обіцянка переходить з pending в fulfilled або rejected.
Як працює ланцюжок then()/catch().
Як await перетворює обіцянку на значення (або кидає помилку).

Інструменти налагодження (DevTools у браузері, консоль Node.js, логи) можуть дуже допомогти. Крокове налагодження (breakpoint) у IDE також дає відмінне уявлення про те, який код зараз виконується, а що чекає в черзі.

Малий приклад з обіцянками:

function asyncOperation() {  
 return new Promise((resolve, reject) => {  
 setTimeout(() => {  
 const isSuccess = Math.random() > 0.5;  
 if (isSuccess) {  
 resolve("Data received!");  
 } else {  
 reject("Something went wrong...");  
 }  
 }, 500);  
 });  
}  

console.log("Before promise");  
asyncOperation()  
 .then((data) => {  
 console.log("Success:", data);  
 })  
 .catch((error) => {  
 console.log("Error:", error);  
 });  
console.log("After promise");

Тут, Before promise і After promise з’являються синхронно, а Success: або Error: з’являються трохи пізніше залежно від випадкового флагу.

Використовуйте асинхронний код у навчальних проєктах

Щоб інтегрувати асинхронність, корисно створити невеликий проєкт, де багато роботи з мережею або таймерами.
Наприклад:

Напишіть простий чат, який опитує сервер або використовує WebSocket.
Зробіть запит до API та періодично оновлюйте сторінку (через setInterval).
Приклад завантаження, обробки та рендерингу даних (fetch → обробка → рендер).

Під час роботи ви знову і знову побачите, чому так важливо знати, коли щось завершується, і як правильно пов'язувати callbacks або обіцянки, або await.

Топ-5 помилок, які роблять джуніори з асинхронністю

Забування повернути обіцянку. Часто при використанні then() можна побачити щось на кшталт:

function getData() {  
 fetch("...")  
 .then((response) => response.json())  
 .then((data) => { /* ... */ });  
}

Але вони не пишуть return fetch(...), тому неможливо дочекатися результату за межами цієї функції.
Відсутність або неправильне використання await. Всередині async-функції junior може забути поставити await перед викликом, через що результат залишається обіцянкою замість бажаних даних.
Змішування callbacks і обіцянок. В одному місці є then(), в іншому — callback на setTimeout, і вони намагаються вкладати їх без чіткого порядку. В результаті виходить спагеті-код, який важко розплутати.
Використання глобальних змінних для передачі результатів. Це призводить до непередбачуваних помилок, особливо якщо змінна "записується" до того, як асинхронна операція реально завершиться.
Необроблені помилки. Асинхронність ускладнює обробку помилок. Якщо обіцянка відхиляється і ми не прикріпили catch(), програма може "проглотити" виняток. При використанні async/await також потрібно пам’ятати про обертання await у try/catch, якщо хочемо правильно обробляти помилки.

Поради та хитрощі

Мінімізуйте глибину вкладених викликів

Якщо потрібно зробити кілька асинхронних запитів, подумайте, чи можна їх виконати паралельно (через Promise.all()) або послідовно, але без надмірного вкладення викликів then(), натомість просто повертаючи їх у ланцюгу.

Явна обробка помилок

Не забувайте про catch() та try/catch, працюючи з асинхронним кодом. Найкраще обробляти помилки якомога швидше, а не відкладати їх — так ви уникнете ситуації, коли помилка "випливає" через кілька викликів, і важко з’ясувати, де вона сталася.

Консоль та логи — ваші найкращі друзі

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

Час від часу налагоджуйте в реальному часі

Знання того, як ставити breakpoints і дивитися на стек викликів під час асинхронних викликів, дуже корисне. Ви побачите, які функції були викликані, коли вони потрапили в чергу, і які дані приходять в кожен callback.

Висновок

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

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

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

Що далі?

You Don’t Know JS: Async & Performance (Kyle Simpson)

Відмінна книга (частина серії "You Don’t Know JS"), яка детально пояснює, як працюють callbacks, promises, генератори, async/await та інші асинхронні механізми в JavaScript.

Ви можете знайти її безкоштовно на GitHub.

Eloquent JavaScript (Marijn Haverbeke)

Дуже популярна книга для початківців JavaScript-розробників. Третє видання також містить розділ про асинхронність та обіцянки.

Офіційний сайт

MDN Web Docs

Документація Mozilla — справжній скарб знань з JavaScript, включаючи розділи про асинхронність, обіцянки, async/await.

JavaScript Info

Посібник російською та англійською, який охоплює багато аспектів JS, зокрема Event Loop та обіцянки.

https://javascript.info

Удачі в опануванні асинхронності!

Перекладено з: Why Junior Developers Get Confused by Asynchronous Code (and How to Learn to Work with It)