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

Асинхронный код - это все, что помещается в очередь в другой очереди, а не в цикле событий, поэтому другие операторы / код могут выполняться без асинхронного кода, блокирующего цикл событий. Например, вы можете приготовить еду, а также вымыть посуду, вам не нужно ждать, пока еда будет готова, прежде чем мыть посуду, вы можете сделать это, пока еда готовится. Отправка HTTP-запроса похожа на готовку: запрос занимает определенное время, но затем цикл событий уже перешел к следующей строке кода. Мы узнаем о трех наиболее распространенных способах обработки асинхронного кода и о том, как их реализовать.

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

В этом примере мы создали переменную с именем «xander» со строкой в ​​ней, а затем функцию с именем getSet, которая будет использовать функцию setTimeOut для изменения содержимого этой переменной, и мы передали 500 мс в качестве второго аргумента. Мы вызываем функцию getSet, и она дает нам значение переменной «Get Ready». Это одна из проблем асинхронного кода, потому что JavaScript начинает запускать функцию, но затем переходит к следующей строке, прежде чем функция сможет завершить выполнение в указанное время, поэтому мы не видим результат функции. Это также произойдет независимо от времени, установленного для запуска функции setTimeOut. Теперь поговорим о том, как работать с асинхронным кодом.

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

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

Чтобы реализовать обратный вызов для нашей функции getSet, нам нужно добавить обратный вызов в качестве аргумента нашей функции getSet, и этот аргумент будет иметь тип function, который позволит нам вызвать его в функции setTimeOut, а затем выполнить его через 500 мс. Мы продолжаем добавлять функцию обратного вызова к нашему вызову getSet, а затем добавляем анонимную функцию, которая изменяет textContent «xander». Чтобы проверить, что мы сделали, мы обновляем страницу и получаем значение «Get Ready !!» который затем меняется на «Все готово !!» по истечении указанного времени выполнения, которое в данном случае составляет 500 мс.

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

Обещания

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

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

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

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

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

Заключение

Мы рассмотрели основы асинхронного кода и поговорили о трех различных методах реализации:

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

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

Async / Await: в этом методе используются обещания, но они более читабельны и понятны.