Обучение работе в однопоточной среде
Как люди, мы любим структуру. Нам нравятся категории, описания и складывать все, что мы знаем, в аккуратные маленькие коробочки. Вот почему я сначала нашел JavaScript таким запутанным. Это скриптовый язык или язык программирования? Он используется в передней или задней части?
Замечательная (читай: ужасная) вещь в JavaScript заключается в том, что в большинстве случаев используется и то, и другое понемногу. За прошедшие годы JavaScript так сильно развился, что его сложно классифицировать. Сегодня я собираюсь погрузиться в то, является ли JavaScript синхронным или асинхронным, и как выглядит рабочий процесс изнутри.
JavaScript синхронный
Спойлер: по своей сути JavaScript - это синхронный, блокирующий, однопоточный язык. Это просто означает, что одновременно может выполняться только одна операция. Но это еще не все!
Что делать, если вам нужно сделать дорогостоящий запрос к базе данных? Вы же не хотите вертеть руками, пока PG и Postgres берут те 800 песен, которые вам нужны для вашей музыкальной библиотеки. Синхронный код очень усложняет жизнь программиста, поэтому сообщество JavaScript разработало отличные обходные пути.
Когда вы слышите, как люди говорят, что JavaScript является асинхронным языком, они имеют в виду, что вы можете манипулировать JavaScript, чтобы вести себя асинхронным образом. Не запекается, но возможно! Вот несколько способов добиться этого:
Асинхронные обратные вызовы
Самое раннее и простое решение, позволяющее застрять в синхронном мире, - это использование асинхронных обратных вызовов (подумайте setTimeout()).
Давайте использовать запрос базы данных в качестве примера: асинхронные обратные вызовы позволяют вам вызывать функцию обратного вызова, которая отправляет запрос базы данных (и любые другие вложенные обратные вызовы) в ваше приложение, где оно ожидает ответа от базы данных, освобождая остальную часть ваш код, чтобы продолжить работу.
После завершения запроса к базе данных результаты (и любой другой вложенный код) отправляются в очередь, а затем обрабатываются в цикле событий.
На схеме вы можете увидеть, чем это отличается от синхронного кода. Функция C вместе с E, F и G отправляются в браузер, в очередь и цикл обработки событий.
Хотя это отличное решение, оно оставляет желать лучшего. Поскольку вы не можете точно предсказать, когда функция C разрешится, вы должны вложить в нее все зависимые функции. Это быстро становится грязным и приводит к печально известному аду обратных вызовов, с которым никто не хочет иметь дело. Именно эта среда вдохновила на обещание.
Обещания
Чтобы справиться с адом обратных вызовов, такие библиотеки, как Bluebird или Q, позволили программистам очистить свой синтаксис и написать код, который работал асинхронно, но выглядел синхронно. В результате получился код, который было легче читать и быстрее запускать.
С обещанием, вместо того, чтобы объединять все зависимости в один блок кода и отправлять все это браузеру, мы можем разделить их.
Мы можем отправить асинхронный обратный вызов (функция C) в браузер и использовать .then() для удержания всех других зависимостей (E, F и G) в стороне, выполняя их только после возврата и запуска функции C.
Это позволяет нам кодировать более модульным и читаемым образом, но при этом пользоваться преимуществами асинхронного программирования.
Асинхронный / Ожидание
Обещания были фантастическими - настолько фантастическими, что ES6 ввел их в язык как стандарт. Но использование обещаний по-прежнему оставляло асинхронный код немного шатким, поэтому теперь у нас есть красивый и потрясающий Async / Await, который нам поможет!
Об Async / Await написаны целые сообщения в блогах и (я уверен) книги, поэтому я не буду вдаваться в подробности, но достаточно сказать, что Async / Await позволяет:
- Продолжайте использовать обещания
- Напишите асинхронный код, который выглядит и ощущается синхронным
- Очищает синтаксис и делает код более читабельным
Вот некоторые из моих любимых сообщений в блогах и видео по Async / Await, если вы хотите больше почитать:
Спасибо за прочтение! Налог на кошек:
