ИСПОЛЬЗОВАНИЕ АСИНХРОННОГО JAVASCRIPT С ASYNC/AWAIT

Абдулганиев Дамир Ленарович
Казанский национальный исследовательский технологический университет
магистр второго года обучения

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

Ключевые слова: , , , , , , ,


Рубрика: 05.00.00 ТЕХНИЧЕСКИЕ НАУКИ

Библиографическая ссылка на статью:
Абдулганиев Д.Л. Использование асинхронного Javascript с async/await // Современные научные исследования и инновации. 2019. № 2 [Электронный ресурс]. URL: https://web.snauka.ru/issues/2019/02/88777 (дата обращения: 14.03.2024).

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

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

Все они исходят из-за того, что Javascript – однопоточный язык программирования. Это означает, что при выполнении полностью синхронного кода веб-страница не будет реагировать до тех пор, пока код не выполнится. Например, если вы используете синхронный AJAX запрос, то пользователь не сможет ничего сделать до его исполнения.

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

Ярким примером асинхронности в Javascript будет функция setTimeout, т.к. ее можно использовать как в браузерном Javascript, так и в

серверном. На рисунке 1 представлен код и результат его исполнения. Может показаться, что код должен напечатать значения в порядке «first», «second», «third», но этого не происходит, т.к. код исполняется асинхронно и мы получаем именно такой результат.

Рисунок 1. «Пример функции setTimeout»

Callback или функция обратного вызова – один из первых методов работы с асинхронными функциями. На рисунке 1 именно он и используется. В качестве функции обратного вызова выступает анонимная функция. Этот метод хорош, но на практике он несет в себе некоторые проблемы. Основная проблема – так называемый «callback hell» [1] – огромные блоки неразрывно связанного кода, который трудно воспринимается даже опытными разработчиками. Пример –  рисунок 2.

На смену функциям обратного вызова пришли Promise (англ. обещание) в спецификации ECMAScript 2015 [2]. Хорошим примером будет метод fetch [3], пришедший на смену XMLHttpRequest и использующий Promise. На рисунке 3 видно благодаря Promise код выглядит более чистым.

Конструкция async/await пришла в стандарте ES7 [4] и ее по праву можно считать улучшением в асинхронном программировании Javascript.

Рисунок 2. «Пример Callback hell»

Благодаря тому, что async/await – всего лишь синтаксический сахар над Promise мы можем не только использовать их вместе, но и радоваться поддержкой всех основных браузеров. На рисунке 4 показан код, идентичный коду на рисунке 3.

Рисунок 3. «Пример использования функции fetch основанной на Promise»

Легко заметить, что async/await делает код более понятным, чем вариант с Promise. А самое прекрасное в нем то, что если убрать ключевые слова async и await, то код будет выглядеть как обычный набор синхронных инструкций.

Рисунок 4. «Пример функции fetch с использованием async/await»


Библиографический список
  1. Callback Hell http://callbackhell.com
  2. ECMAScript® 2015 Language Specification https://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects
  3. Метод fetch: замена XMLHttpRequest https://learn.javascript.ru/fetch
  4. ECMAScript® 2017 Language Specification (ECMA-262, 8th edition, June 2017) https://www.ecma-international.org/ecma-262/8.0/#sec-async-function-definitions


Количество просмотров публикации: Please wait

Все статьи автора «Абдулганиев Дамир Ленарович»


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

Связь с автором (комментарии/рецензии к статье)

Оставить комментарий

Вы должны авторизоваться, чтобы оставить комментарий.

Если Вы еще не зарегистрированы на сайте, то Вам необходимо зарегистрироваться:
  • Регистрация