Огляд цікавого > Проходження співбесід > JS > Розуміння async/await в JavaScript (Підготовка до співбесіди)

Розуміння async/await в JavaScript (Підготовка до співбесіди)

від Serhii

Асинхронність – одна з ключових концепцій сучасного JavaScript. Розуміння того, як ефективно керувати асинхронними операціями, є критично важливим для будь-якого розробника, особливо під час проходження технічних співбесід. Синтаксичний цукор async/await, представлений в ES2017 (часто згадується як частина ES6+), кардинально змінив підхід до написання асинхронного коду, зробивши його чистішим, читабельнішим та схожим на синхронний.

Ця стаття – ваш вичерпний посібник з async/await. Ми детально розглянемо, що це таке, як воно працює “під капотом”, які проблеми вирішує, як правильно його використовувати, і на які питання варто очікувати на співбесіді.

Що таке асинхронність в JavaScript?

Перш ніж занурюватися в async/await, важливо розуміти основи асинхронності в JavaScript. JavaScript за своєю природою є однопотоковим, що означає, що він може виконувати лише одну операцію в конкретний момент часу. Однак багато операцій (наприклад, запити до сервера, читання файлів, таймери) потребують часу для завершення і можуть блокувати основний потік, роблячи інтерфейс користувача невідгукливим.

Асинхронність дозволяє JavaScript ініціювати довготривалу операцію, продовжити виконання іншого коду і повернутися до результату операції, коли вона буде завершена, не блокуючи при цьому основний потік. Це досягається за допомогою механізмів, таких як Event Loop, черга повідомлень та Web API (у браузері) або C++ API (у Node.js).

Проблема “Callback Hell”

Історично, першим підходом до асинхронності були функції зворотного виклику (callbacks). Функція передається як аргумент іншій функції і викликається після завершення асинхронної операції. Хоча це працює, при роботі з кількома залежними асинхронними операціями код швидко стає складним для читання та підтримки, утворюючи так зване “пекло зворотних викликів” (Callback Hell) або “піраміду долі” (Pyramid of Doom):

JavaScript

// Приклад Callback Hell
getData(function(a) {
  getMoreData(a, function(b) {
    getEvenMoreData(b, function(c) {
      getFinalData(c, function(result) {
        console.log(result);
      }, handleError);
    }, handleError);
  }, handleError);
}, handleError);

function handleError(err) {
  console.error("Помилка:", err);
}

 

Цей код важко читати, відлагоджувати та обробляти помилки послідовно.

Як Проміси (Promises) покращили ситуацію?

Проміси (Promises), введені в ES6 (ES2015), стали значним кроком уперед. Проміс – це об’єкт, що представляє кінцевий результат асинхронної операції. Він може перебувати в одному з трьох станів:

  1. pending: Початковий стан, операція ще не завершена.
  2. fulfilled: Операція успішно завершена, і проміс має результат (value).
  3. rejected: Операція завершилася з помилкою, і проміс має причину відхилення (reason).

Проміси дозволяють ланцюгувати асинхронні операції за допомогою методів .then() (для успішного виконання) та .catch() (для обробки помилок), роблячи код більш структурованим:

JavaScript

// Приклад з Промісами
getData()
  .then(a => getMoreData(a))
  .then(b => getEvenMoreData(b))
  .then(c => getFinalData(c))
  .then(result => {
    console.log(result);
  })
  .catch(handleError); // Єдиний обробник помилок для всього ланцюжка

function handleError(err) {
  console.error("Помилка:", err);
}

 

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

Представляємо async/await

async/await – це синтаксичний цукор, побудований поверх Промісів. Він дозволяє писати асинхронний код, який виглядає і поводиться трохи схоже на синхронний, що значно покращує читабельність та спрощує логіку.

Ключові компоненти:

  1. async: Ключове слово, яке ставиться перед оголошенням функції (async function myFunction() {...} або const myFunction = async () => {...}). Воно робить дві речі:

    • Автоматично змушує функцію повертати Проміс. Якщо функція явно повертає значення, воно буде автоматично “загорнуте” в Проміс, що успішно виконався (Promise.resolve(value)). Якщо функція генерує помилку, вона поверне відхилений Проміс (Promise.reject(error)).
    • Дозволяє використовувати ключове слово await всередині цієї функції.

  2. await: Ключове слово, яке можна використовувати тільки всередині async функції. Воно ставиться перед викликом функції, що повертає Проміс. await змушує виконання async функції призупинитися доти, доки Проміс не буде вирішено (або fulfilled, або rejected).

    • Якщо Проміс успішно виконується (fulfilled), await повертає його результат.
    • Якщо Проміс відхиляється (rejected), await генерує помилку (викидає значення відхилення), яку можна перехопити за допомогою try...catch.

Приклад перетворення коду з Промісів на async/await

Давайте перепишемо попередній приклад з Промісами за допомогою async/await:

JavaScript

async function processData() {
  try {
    const a = await getData();
    const b = await getMoreData(a);
    const c = await getEvenMoreData(b);
    const result = await getFinalData(c);
    console.log(result);
  } catch (err) {
    handleError(err); // Обробка будь-якої помилки з await
  }
}

function handleError(err) {
  console.error("Помилка:", err);
}

processData(); // Викликаємо async функцію

 

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

Переваги async/await

  • Читабельність: Код виглядає чистіше та більше схожий на синхронний.
  • Спрощена обробка помилок: Використання стандартних блоків try...catch для асинхронного коду є інтуїтивно зрозумілим.
  • Відлагодження: Легше ставити точки зупину та відстежувати потік виконання в дебагері.
  • Зменшення вкладеності: Усуває потребу в ланцюжках .then().

Обробка помилок з async/await

Як показано в прикладі вище, стандартний блок try...catch є основним способом обробки помилок в async функціях. Будь-яка помилка, що виникає під час виконання await (тобто, якщо Проміс відхиляється), або будь-яка інша синхронна помилка всередині блоку try, буде перехоплена блоком catch.

JavaScript

async function fetchUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    if (!response.ok) {
      // Якщо статус відповіді не ОК (напр. 404, 500), генеруємо помилку вручну
      throw new Error(`HTTP помилка! Статус: ${response.status}`);
    }
    const userData = await response.json(); // `await` також потрібен тут!
    console.log(userData);
    return userData;
  } catch (error) {
    console.error("Не вдалося отримати дані користувача:", error);
    // Тут можна обробити помилку, наприклад, показати повідомлення користувачу
    // або повернути значення за замовчуванням
    return null;
  }
}

 

Важливо: Не забувайте await для кожної асинхронної операції, результат якої вам потрібен, включаючи, наприклад, response.json(). Також пам’ятайте, що Workspace сам по собі не відхиляє Проміс при HTTP-помилках (як 404 або 500), він відхиляє його тільки при мережевих проблемах. Тому часто потрібно перевіряти response.ok вручну.

Поширені патерни та приклади використання

Послідовне виконання

Коли вам потрібно виконати кілька асинхронних операцій одна за одною, де кожна наступна залежить від результату попередньої, async/await робить це дуже просто:

JavaScript

async function sequentialOperations() {
  try {
    console.log("Початок операції 1...");
    const result1 = await longOperation1(); // Чекаємо завершення 1
    console.log("Операція 1 завершена:", result1);

    console.log("Початок операції 2 з результатом 1...");
    const result2 = await longOperation2(result1); // Чекаємо завершення 2
    console.log("Операція 2 завершена:", result2);

    console.log("Всі операції успішно завершені.");
  } catch (error) {
    console.error("Помилка під час послідовних операцій:", error);
  }
}

 

Паралельне виконання

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

Promise.all(iterable) приймає масив (або інший ітерабельний об’єкт) Промісів і повертає новий Проміс, який:

  • Виконується (fulfilled), коли всі проміси в масиві успішно виконуються. Результатом є масив результатів у тому ж порядку.
  • Відхиляється (rejected), як тільки будь-який проміс у масиві відхиляється.

JavaScript

async function parallelOperations() {
  try {
    console.log("Запуск паралельних операцій...");
    const [result1, result2, result3] = await Promise.all([
      fetchData('url1'),
      fetchData('url2'),
      fetchData('url3')
    ]);
    // Важливо: Всі fetch почнуться майже одночасно
    // await Promise.all чекатиме, доки всі три не завершаться

    console.log("Всі паралельні операції завершені:");
    console.log("Результат 1:", result1);
    console.log("Результат 2:", result2);
    console.log("Результат 3:", result3);
  } catch (error) {
    // Якщо хоча б один fetch завершиться помилкою, ми потрапимо сюди
    console.error("Помилка під час паралельних операцій:", error);
  }
}

 

Promise.allSettled(iterable) також приймає масив Промісів, але він чекає, поки всі проміси завершаться (або fulfilled, або rejected), і повертає Проміс, який завжди виконується (fulfilled). Результатом є масив об’єктів, що описують результат кожного промісу ({status: 'fulfilled', value: ...} або {status: 'rejected', reason: ...}). Це корисно, коли вам потрібні результати всіх операцій, незалежно від того, чи були серед них помилки.

JavaScript

async function parallelSettledOperations() {
    console.log("Запуск паралельних операцій (allSettled)...");
    const results = await Promise.allSettled([
      fetchData('url1'),
      fetchData('potentiallyFailingUrl2'),
      fetchData('url3')
    ]);

    console.log("Всі паралельні операції завершені (settled):");
    results.forEach((result, index) => {
      if (result.status === 'fulfilled') {
        console.log(`Операція ${index + 1} успішна:`, result.value);
      } else {
        console.error(`Операція ${index + 1} не вдалася:`, result.reason);
      }
    });
}

 

Поширені питання на співбесідах про async/await

Під час співбесіди вас можуть запитати:

  1. Що таке async/await?

    • Відповідь: Це синтаксичний цукор над Промісами, який дозволяє писати асинхронний код, що виглядає як синхронний, покращуючи читабельність та спрощуючи логіку. async позначає функцію, що повертає Проміс, а await призупиняє виконання async функції до завершення Промісу.

  2. Яку проблему вирішує async/await?

    • Відповідь: Головним чином, проблему “Callback Hell” та складність ланцюжків .then() при роботі з Промісами. Він робить асинхронний код більш лінійним, читабельним та легшим для відлагодження.

  3. Чим async/await відрізняється від .then/.catch?

    • Відповідь: async/await – це синтаксис, що використовує Проміси “під капотом”. .then/.catch – це методи самого об’єкта Проміс. async/await дозволяє уникнути вкладеності .then() і використовувати try...catch для обробки помилок, що робить код схожим на синхронний.

  4. Як обробляти помилки в async функціях?

    • Відповідь: За допомогою стандартного блоку try...catch. Будь-який відхилений Проміс, якого “очікують” за допомогою await всередині try, або будь-яка синхронна помилка в блоці try, буде перехоплена блоком catch.

  5. Що повертає async функція?

    • Відповідь: Завжди Проміс. Якщо функція повертає значення, воно стає результатом успішного Промісу (Promise.resolve(value)). Якщо функція генерує помилку, повертається відхилений Проміс (Promise.reject(error)).

  6. Чи можна використовувати await поза async функцією?

    • Відповідь: Зазвичай ні. await дійсний лише всередині функції, оголошеної з ключовим словом async. Винятком є Top-Level Await, який дозволений на верхньому рівні JavaScript модулів (ES Modules).

  7. Як виконати кілька асинхронних операцій паралельно за допомогою async/await?

    • Відповідь: Запустити операції без await (щоб отримати Проміси), зібрати ці Проміси в масив і передати його в Promise.all() або Promise.allSettled(). Потім використовувати await для очікування результату Promise.all() / Promise.allSettled().

  8. Що таке Top-Level Await?

    • Відповідь: Це можливість використовувати ключове слово await поза async функціями, але тільки на верхньому рівні ES модулів. Це корисно для ініціалізації ресурсів, завантаження залежностей тощо на етапі завантаження модуля.

Кращі практики та поширені помилки

  • Не забувайте await: Якщо ви викликаєте функцію, що повертає Проміс, і вам потрібен її результат для подальших кроків, не забувайте ставити await перед нею. Інакше ви отримаєте сам об’єкт Проміс, а не його результат, і код продовжить виконуватися, не чекаючи завершення операції.
  • Не забувайте async: Ключове слово await працює тільки всередині функції, позначеної як async.
  • Використовуйте try...catch: Завжди обгортайте потенційно небезпечні await виклики в try...catch для належної обробки помилок.
  • Використовуйте Promise.all для паралелізму: Не виконуйте незалежні асинхронні операції послідовно за допомогою кількох await, якщо їх можна виконати паралельно. Це значно покращить продуктивність.
  • Розумійте, що async функція завжди повертає Проміс: Навіть якщо ви не використовуєте await всередині або повертаєте просте значення, функція, оголошена як async, поверне Проміс. Це важливо при взаємодії з іншим кодом.
  • Уникайте змішування стилів без необхідності: Хоча async/await і .then/.catch можна комбінувати, намагайтеся дотримуватися одного стилю в межах функції для кращої читабельності.

Висновок

async/await є потужним і елегантним інструментом для роботи з асинхронним кодом в JavaScript. Розуміння його механізмів, переваг, способів обробки помилок та патернів використання є абсолютно необхідним для сучасного веб-розробника. На співбесідах часто перевіряють глибоке розуміння цих концепцій, оскільки вони є основою для створення ефективних та надійних веб-додатків.

Інвестуючи час у вивчення та практику async/await, ви не тільки підвищуєте свої шанси на успішне проходження співбесіди, але й стаєте більш компетентним та затребуваним розробником.

Сподіваємося, ця стаття допоможе вам впевнено відповідати на питання про async/await та ефективно використовувати цей інструмент у вашій роботі!

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *