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

ЧТО ОЗНАЧАЕТ АСИНХРОННОСТЬ В JAVASCRIPT?
JavaScript был разработан для выполнения кода синхронно. Проще говоря, это означает, что он выполняет операции в том порядке, в котором код написан. Каждая операция ожидает выполнения предыдущей, как показано в примере ниже.

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

CALLBACKS
CALLBACKS помогают нам писать асинхронный код, передавая функцию в качестве аргумента внутри другой функции. Этот подход позволяет функции легко вызывать другую функцию, отсюда и название обратного вызова. Использование обратного вызова позволяет нам управлять последовательностью или порядком, в котором могут вызываться функции. Ниже приведены несколько простых примеров того, как работает обратный вызов:

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

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

Это становится еще сложнее, если вам нужно обрабатывать ошибки в каждом обратном вызове отдельно, что сделает код еще более вложенным и трудным для чтения. Более того, становится сложнее отлаживать, так как вам придется следить за стеком функций каждого обратного вызова.

Подход, основанный на промисах, более удобочитаемый, компонуемый и простой для рассуждений.

PROMISES
Promises — это более поздняя добавка к JavaScript, которая обеспечивает более структурированный и компонуемый способ обработки асинхронных задач. Обещания в JavaScript значительно упрощают работу с асинхронным кодом. Это не только делает наш код более элегантным; это также помогает в обработке ошибок. Промисы принимают два обратных вызова (разрешить и отклонить) в качестве аргумента. Обратный вызов разрешения вызывается, когда функция исполнителя была успешно выполнена с результатами, а обратный вызов отклонения вызывается, когда произошла ошибка. с проблемами, с которыми мы столкнулись, используя подход обратного вызова, ниже показано, как их решают промисы.

В этом коде функции getUserData, getUserPosts и getUserComments возвращают обещания, что позволяет связать их вместе с помощью метода then. Первый метод then вызывается после разрешения getUserData, второй — после разрешения getUserPosts, а последний — после getUserComments. разрешено. Метод catch используется для обработки любых ошибок, которые могут возникнуть.

Это поможет сделать код более читабельным, компонуемым и понятным. Конструктор Promise также регистрирует объект, содержащий некоторые свойства:

  1. PromiseState: в обещании есть три состояния, обычно оно начинается с ожидание, что обычно указывает на то, что процесс запущен. Когда процесс завершается успешно, он переходит в состояние выполнено, а когда процесс завершается с ошибкой, он переходит в состояние отклонено.
  2. PromiseResult: обычно он не определен в ожидании, затем он изменяется на значение разрешенного обещания при выполнении или изменяется на ошибку отклоненного обещания при отклонении.

При доступе к результату нашего обещания мы используем метод «.then», метод «.catch» и метод «finally».

  1. Мы запускаем функцию «.then», чтобы получить результат выполненного обещания.
  2. Мы запускаем функцию «.catch», чтобы получить результат отклоненного промиса.
  3. Функция «.finally» — это просто функция очистки, используемая для выполнения процедур завершения.

ASYNC/AWAIT
Метод async/await для обработки асинхронного программирования — это просто синтаксический сахар, который JavaScript предоставляет вместо промисов, что упрощает написание асинхронного кода, который выглядит и ведет себя как синхронный код. . Это гораздо более чистый способ написания асинхронного кода. Нашу предыдущую задачу можно записать с использованием синтаксиса async await следующим образом:

В этом коде мы обернули весь блок кода внутри асинхронной функции с именем fetchUserData. Затем мы заменили методы .then и .catch на блоки try и catch соответственно. Мы используем ключевое слово await перед каждым вызовом функции, чтобы дождаться разрешения обещания, прежде чем переходить к следующей строке кода.

Таким образом, код будет выполняться последовательно, что сделает его более читабельным и понятным. Блок try-catch будет ловить любые ошибки, которые могут возникнуть, и обрабатывать их в блоке catch.

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