Позвольте мне объяснить синхронный и асинхронный JavaScript на простом примере из реальной жизни.

Синхронный Javascript:

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

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

Асинхронный JavaScript:

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

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

Понимание обратных вызовов, промисов и Async/Await

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

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

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

Обещания:

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

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

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

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

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

Краткое содержание

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

Первоначально опубликовано на https://saloni1904.hashnode.dev.