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

Инструменты для веб-скрапинга с открытым исходным кодом: Python Developer Toolkit
Инструменты для веб-скрапинга с открытым исходным кодом: Python Developer Toolkit

20.03.2023 14:01

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

Калькулятор CGPA 12 для семестра
Калькулятор CGPA 12 для семестра

20.03.2023 12:24

Чтобы запустить этот код и рассчитать CGPA, необходимо сохранить код как HTML-файл, а затем открыть его в веб-браузере. Для этого выполните следующие действия:

ONLBest Online HTML CSS JAVASCRIPT Training In INDIA 2023
ONLBest Online HTML CSS JAVASCRIPT Training In INDIA 2023

20.03.2023 11:15

О тренинге HTML JavaScript :HTML (язык гипертекстовой разметки) и CSS (каскадные таблицы стилей) - две основные технологии для создания веб-страниц. HTML обеспечивает структуру страницы CSS (визуальное и звуковое) оформление для различных устройств. Наряду с графикой и сценариями HTML и CSS являются...

Как собрать/развернуть часть вашего приложения Angular
Как собрать/развернуть часть вашего приложения Angular

20.03.2023 08:46

Вам когда-нибудь требовалось собрать/развернуть только часть вашего приложения Angular или, возможно, скрыть некоторые маршруты в определенных средах?

Запуск PHP на IIS без использования программы установки веб-платформы
Запуск PHP на IIS без использования программы установки веб-платформы

19.03.2023 13:43

Установщик веб-платформы, предлагаемый компанией Microsoft, перестанет работать 31 декабря 2022 года. Его закрытие привело к тому, что мы не можем запускать наши php-файлы через localhost на наших компьютерах. Мне с трудом удалось установить его и я решил поделиться этой статьей, чтобы помочь тем,...

Оптимизация React Context шаг за шагом в 4 примерах
Оптимизация React Context шаг за шагом в 4 примерах

19.03.2023 13:03

При использовании компонентов React в сочетании с Context вы можете оптимизировать рендеринг, обернув ваш компонент React в React.memo сразу после поставщика контекста. Это позволит избежать ненужных повторных рендеров.