Введение в асинхронный Javascript. Основы веб-разработки для новичков

Есть два подхода, как может обрабатываться JavaScript-код браузером:

• асинхронный;
• синхронный.

JavaScript — это язык программирования, работающий в одном потоке. То есть движок JS, встроенный в браузер, может решать только одну задачу в одном потоке. Этот язык является «браузерным», то есть он обрабатывается непосредственно внутри обозревателя интернета. Однопоточность JS, с одной стороны, является большим плюсом, так как это делает написание кода довольно простым, потому что не нужно волноваться, как будет обрабатываться ваш код при параллельном выполнении. Но с другой стороны, однопоточность добавляет определенные неудобства.

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

И как раз в однопоточном режиме заметна разница в работе асинхронного и синхронного JavaScript. Вот в чем главные отличия в этих подходах простыми словами:

1. Синхронный JavaScript. Представим простую ситуацию, что у вас есть 2 строки кода. При синхронной обработке 2-я строка кода не начнет свое выполнение, пока его не окончит 1-я. Такой подход актуален, когда нужно строгое выполнение по порядку или же нужно, чтобы загрузка и выполнение событий происходили прямо сейчас в этот момент времени. Такой подход не актуален, когда для выполнения операций нужно какое-то время: запрос к БД, полученными результатами нужно заполнить какой-нибудь шаблон, загрузка изображений с других серверов и т. д. Эти задачи могут заблокировать основной поток, поэтому их лучше выполнять асинхронно.
2. Асинхронный JavaScript. Такая же ситуация — у нас есть 2 строчки кода. Запускается 1-я строка, но ее выполнение невозможно окончить, так как для этого нужно получить дополнительные инструкции, а для этого тоже нужно дополнительное время. При синхронном выполнении у нас бы просто «подвисла» страница, пока не пройдет нужно время и не закончат выполняться все инструкции. Но при асинхронном выполнении эта строка переходит работать в фоновый режим, а вторая строка начинает запускаться, не ожидая окончания выполнения первой. Тем самым общее выполнение программы не блокируется, и как только первая строка закончит свою работу в фоновом режиме, то ее результат будет возвращен в основной поток программы. Об этом виде JavaScript мы сегодня и поговорим.

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

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

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

Асинхронный JavaScript может включать в себе два стиля такого кода, которые будут встречаться при разработке на JS:

1. Callbacks. Колбеки — это старый метод реализации асинхронного кода.
2. Promises. Промисы — это новый подход в реализации асинхронного кода.

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

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

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

Заключение

Мы лишь приоткрыли вам занавес на асинхронный JavaScript. Его применение возможно при более глубоком изучении, чтобы понимать, когда в этом есть необходимость. Условный ориентир — это когда на выполнение какой-то задачи понадобится время, и чтобы не заблокировать такой задачей основной поток, нужно вывести ее в асинхронное выполнение.

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