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

RedDeveloper
06.02.2023 13:41
[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, и важно понимать различные доступные варианты выполнения асинхронных операций.

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

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

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.