26 – Ключевые слова async и await

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

Ключевое слово async перед словом function и превращает функцию в асинхронную. Вот так всё просто. Давайте создадим такую асинхронную функцию.

Как видите, в отличие от создания промиса, асинхронная функция ждет когда её вызовут, а не выполняется сразу. Теперь, нам надо эту функция запустить.

И как видите, асинхронная функция запустила инструкцию консоль лог и также вернул промис с его состоянием и текстом привет мир. Это значит что мы можем воспользоваться методом then промиса.

И как видно из полученных значений, сперва выполнилась асинхронная функция, потом метод then, который вывел текст в консоль и тоже вернул промис.

Итак метод then мы применили, а как же обработать ошибку с помощью метода catch, ведь мы не отправляем никакие данные в этот метод, как мы это делали используя функцию rejected в промисе. В асинхронной функции, которую мы объявили с помощью ключевого слова async, для обработки ошибки, мы эту ошибку должны создать. Делается это так. Создадим снова асинхронную функцию:

В параметре этой функции мы будем передавать булевское значение. Если мы передадим тру, то создадим новую ошибку. Делается этот так, сперва пишется ключевое слово throw. Данное ключевое слово необходимо для создания ошибок, точнее говорить для создания исключений. А дальше мы должны воспользоваться конструктором Error, т.е. пишем new Error и в скобках пишем текст для новой ошибки. Он будет простой – Произошла ошибка! Далее если ошибки не произойдет то просто вернем текст.

Затем вызовем функцию и создадим методы then и catch. В качестве параметра метод catch будет получать объект Error, назовем параметр просто error. Далее чтобы вывести в консоле не просто текст а именно ошибку, надо воспользоваться методом error. В параметре просто напишем объект error и его свойство message, что получить доступ к тексту нашей ошибки.

Выполняем и вот появилась такая красивая ошибка. Данный промис возвращает метод catch. Т.е. он тоже как и then возвращает промис. Если мы в параметре функции передадим аргумент false, то тогда выполнится метод then.

Но мы вообще можем обойтись без методов then и catch, так как внутри функции мы можем использовать ключевое слово await, которая затормозит приостановит выполнение функции, пока промис внутри этой функции не выполнится. В основном его используют для функции fetch, чтобы обратиться к api сайта, и пока мы не получим ответ, не выполнять остальной код.

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

Как например здесь, где мы сперва получаем api сайта, а затем преобразовываем данные JSON в объект.

Использование ключевый слов async и await делает код более легко читаемым, чем использование then и catch.

Теперь поговорим о последнем способе написания асинхронного кода – это web workers. В отличие от предыдущих способов, с помощью web wokrers мы можем выполнять код на отдельном потоке вне основного. Но так как этот отдельный поток тесно взаимосвязан с основным, мы все равно не можем назвать JavaScript многопоточным. Также у отдельного потока есть ограничения, например, у него нет связи c DOM документа. На самом деле веб воркерами вы не скоро еще не будете пользоваться, так как он нужен, чтобы выполнять сложные вычисления на отдельном потоке, а это нужно сверхсложным программам, которые вы начнете разрабатывать уже набравшись опыта.

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

Давайте для примера работы web worker создам html файл.

Теперь пишем код javaScript. Повесим на кнопку c id Start слушатель.

При клике на кнопку нам надо создать новый воркер. Делается это с помощью объекта-класса Worker, где в параметре мы должны написать имя javascript файла, который будет выполняться в отдельном потоке.

Далее мы можем отправить какие-нибудь данные в код worker.js. Делается это с помощью метода postMessage объекта воркер.

Давайте отправим число миллиард. А код в worker js рассчитает сумму от одного до миллиарда.

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

Веб воркеры передают сообщения с помощью объекта eventMessage, внутри которого содержатся все необходимые данные. Этот объект будет передаваться в параметре нашей функции. Давайте этот параметр так и назовем eventMessage. И далее в теле функции просто выведем результат на экран. Чтобы получить доступ именно к передаваемым данным, нам надо использовать свойство data объекта event Message.

Теперь давайте напишем код в worker js.

Сперва напишем свойство onmessage которая будет получать данные с основного потока. В значении напишем функцию. Далее создадим код, который будет складывать число от 1 до миллиарда.

Далее мы должны вызвать функцию postMessage, чтобы передать результат.

Проверяем. Как видите появилась такое страшное число, которую я даже не знаю как произносить.

А на этом урок заканчивается. До встречи на следующих уроках.