Как работите с асинхронен JavaScript?

Работя с асинхронност в JavaScript, използвайки callbacks, promises и async/await.

Callbacks са функции, които се предават на други функции като аргументи и се изпълняват след завършване на определена операция. Могат да доведат до "адски callbacks" при вложеност.

// Пример за callback
function fetchData(callback) {
  setTimeout(() => {
    callback("Данните са получени");
  }, 1000);
}

fetchData((data) => {
  console.log(data); // Ще изведе "Данните са получени" след 1 секунда
});

Promises са обекти, които представляват крайното завършване или неуспех на асинхронна операция. Улесняват работата с асинхронен код, избягвайки дълбока вложеност. Имат три състояния: pending (в очакване), fulfilled (успешно), rejected (отхвърлено).

// Пример за promise
function fetchDataPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Данните са получени");
    }, 1000);
  });
}

fetchDataPromise()
  .then((data) => {
    console.log(data); // Ще изведе "Данните са получени" след 1 секунда
  })
  .catch((error) => {
    console.error("Грешка:", error);
  });

Async/await е синтактичен захар над promises, който прави асинхронния код по-лесен за четене, подобен на синхронния. Функция, маркирана с async, винаги връща promise. Операторът await може да се използва само вътре в async функции и спира изпълнението, докато promise не бъде изпълнена или отхвърлена.

// Пример за async/await
async function fetchDataAsync() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Данните са получени");
    }, 1000);
  });
}

async function processData() {
  try {
    const data = await fetchDataAsync();
    console.log(data); // Ще изведе "Данните са получени" след 1 секунда
  } catch (error) {
    console.error("Грешка:", error);
  }
}

processData();

Често използвам async/await при работа с API заявки, тъй като това е най-удобният и четим начин за обработка на асинхронни операции. За паралелно изпълнение на няколко асинхронни операции използвам Promise.all() или Promise.allSettled().

Използвам event loop, за да разбера реда на изпълнение на асинхронния код, микротасковете и макротасковете.