[JS за 1 час] - 9. Асинхронный

[JS за 1 час] - 9. Асинхронный

Предыдущие посты

1. За и против 2. Переменная 3. Тип данных 4. Массив 5. if, else, switch 6. циклы 7. функция 8. Объект

JavaScript является однопоточным, то есть он может обрабатывать только одну задачу за раз. Для обработки длительных задач, таких как сетевые запросы, ввод/вывод файлов или анимация, JavaScript использует асинхронную модель программирования.

При асинхронном программировании выполнение кода не блокируется и не ждет завершения асинхронной задачи. Вместо этого он продолжает выполняться и выполняет другие задачи, пока асинхронная задача выполняется в фоновом режиме. Когда асинхронная задача завершается, выполняется функция обратного вызова для обработки результата.

Существует несколько способов выполнения асинхронных операций в JavaScript, включая:

1. Обратные вызовы: Функция обратного вызова передается в качестве аргумента другой функции и выполняется после завершения основной функции.
2. Обещания: Обещание - это объект, представляющий результат асинхронной операции. Он может находиться в одном из трех состояний: ожидание, разрешение или отклонение. Обещания обеспечивают способ регистрации обратных вызовов, которые будут вызываться, когда результат асинхронной операции будет доступен или когда произойдет ошибка.
3. Async/await: Ключевые слова async и await позволяют писать асинхронный код, который выглядит и ведет себя как синхронный. Функция async возвращает Promise, а ключевое слово await можно использовать для приостановки выполнения функции до тех пор, пока Promise не будет разрешен.

Вот пример использования обратных вызовов для выполнения асинхронной операции:

function fetchData(callback) {
  someLongRunningTasks();
  callback(null, "Data fetched successfully");  
}

fetchData((error, data) => {
  if (error) {
    console.error(error);
  } else {
    console.info(data);
  }
});

В этом примере fetchData() - это асинхронная функция, принимающая в качестве аргумента обратный вызов. Обратный вызов выполняется после someLongRunningTasks() либо с ошибкой, либо с результатом.

А вот эквивалентный пример с использованием Promises:

const fetchData = () => {
  return new Promise((resolve, reject) => {
    someLongRunningTasks();
    resolve("Data fetched successfully");
  });
};

fetchData()
  .then((data) => {
    console.info(data);
  })
  .catch((error) => {
    console.error(error);
  });

В этом примере fetchData() возвращает Promise, который разрешается с результатом через 2 секунды. Метод then() используется для регистрации обратного вызова успеха, который регистрирует результат, а метод catch() используется для регистрации обратного вызова ошибки, который регистрирует любые ошибки, которые могут возникнуть.

Или вы можете просто заменить Promise async, await

const fetchData = async () => {
  await someLongRunningTasks();
  resolve("Data fetched successfully");
};

fetchData()
  .then((data) => {
    console.info(data);
  })
  .catch((error) => {
    console.error(error);
  });

Асинхронное программирование является важной частью построения масштабируемых и отзывчивых приложений на JavaScript, и важно понимать различные доступные варианты выполнения асинхронных операций.