В моем предыдущем посте (https://medium.com/@ishudey11032002/synchronous-and-asynchronous-javascript-b4ba421656a3) мы обсуждали синхронное и асинхронное программирование на JavaScript. В этом посте мы собираемся более подробно обсудить асинхронный JavaScript.

Введение:

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

Цикл событий, обратные вызовы, обещания, асинхронность/ожидание

Цикл событий

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

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

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

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

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

Обратные вызовы

Проще говоря, думайте об обратном вызове как о инструкции по доставке или запросе на определенное действие.

Представьте, что вы хотите нанять сантехника, чтобы устранить течь в вашем доме. Вы звоните сантехнику и сообщаете свои контактные данные. Затем вы просите сантехника перезвонить вам, когда они прибудут к вашему порогу.

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

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

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

Обещания

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

Представьте, что вы заказываете пиццу с доставкой. В ресторане вам говорят, что они приготовят пиццу и доставят ее к вашему порогу. Обещают, что скоро принесут пиццу.

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

Например, когда вы отправляете HTTP-запрос серверу для получения некоторых данных, сервер может немедленно вернуть обещание вместо фактических данных. Обещание говорит вам, что данные будут доставлены в какой-то момент.

Асинхронно/ожидание

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

В этом сценарии вы (ученик) похожи на функцию, которая должна выполнять асинхронную задачу, а учитель представляет среду выполнения JavaScript. Инструкция учителя ждать похожа на пометку функции как async в JavaScript. Теперь, ожидая ответа учителя, вы не просто тупо смотрите на него. Вы можете продолжать выполнять другие задачи, например читать книгу или решать головоломки. Тем не менее, вы следите за учителем, ожидая, пока он закончит свое текущее задание и будет готов ответить на ваш вопрос.

Это «наблюдение» за учителем похоже на использование ключевого слова await в JavaScript. Когда вы помечаете функцию async и встречаете ключевое слово await внутри этой функции, он сообщает JavaScript приостановить выполнение этой функции и дождаться завершения ожидаемой задачи.

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

Использование async/await позволяет вам писать асинхронный код, который выглядит и работает больше как синхронный код. Вместо того, чтобы иметь дело со сложными структурами обратного вызова или цепочками промисов, вы можете написать код, который будет выполняться последовательно и прямолинейно.

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

Заключение:

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

Следите за новостями в следующем посте, так как мы углубимся в промисы JavaScript и async/await. Спасибо за прочтение статьи. 🙌

Здравствуйте👋 Я Ишани, студентка последнего курса инженерного факультета. Я люблю веб-разработку, люблю программирование, люблю путешествовать, люблю фотографировать, люблю садоводство, люблю рисовать и люблю…