Когда дело доходит до асинхронного программирования, async/await — это самая простая тема для понимания, если вы хорошо разбираетесь в функциях обратного вызова и промисах javascript. Вы можете обратиться к моему предыдущему блогу, чтобы понять функции обратного вызова javascript и обещания.
В этом блоге мы рассмотрим async/await и посмотрим, как это может помочь нам решить проблемы, связанные с промисами javascript, особенно при объединении нескольких промисов в цепочку.
Что такое асинхронное/ожидание?
- Ключевое слово Async
Если добавить async перед определением функции, эта функция неявно возвращает обещание. На примере рассмотрим, чем она отличается от обычной функции.
Здесь у нас есть простая функция servePasta(), которая возвращает строку. Функция servePasta() слева написана без асинхронности, поэтому она просто регистрирует возвращаемую строку.
Напротив, функции servePasta() справа предшествует async, и, следовательно, возвращаемая строка заключена в обещание, доступ к которому можно получить с помощью функции .then(). .
2. Ключевое слово Await
Await можно использовать только внутри функции, которая объявлена как асинхронная. Когда обещание ожидается, функция приостанавливается до тех пор, пока оно не будет разрешено. В качестве примера, давайте сначала напишем код с .then(), а затем с ожиданием, чтобы понять, как работает await.
Здесь мы берем простой пример, в котором мы готовим пасту (асинхронно) и подаем ее с колой после того, как она будет завершена.
В приведенном выше примере слева показано, как макароны подаются с колой после обещание выполняется с помощью .then().
И справа мы ждем, пока макароны будут готовыи когда обещание выполнено, мы подаем макароны с колой.
Проблемы, решенные с помощью async/await
Теперь давайте рассмотрим проблемы, связанные с промисами, особенно при объединении нескольких промисов в цепочку, и как могут помочь асинхронные/ожидающие решения. Различные задачи включают в себя:
1. Передача параметров по цепочке промисов
2. Улучшенная читаемость кода
3. Улучшенная обработка ошибок
Давайте рассмотрим каждый из них на примере.
- Передача параметров по цепочке обещаний
Давайте разберемся с этим на примере. Представьте, что ваши друзья приходят на ужин, и вы планируете угостить их макаронами.
Подготовка к вечеринке включает следующие этапы:
Вы покупаете продукты в магазине → затем приготовьте пасту → затем подайте пасту. Здесь каждая задача выполняется асинхронно.
Посмотрим, как будет выглядеть ее выполнение с помощью функции .then().
Из примера видно, что макароны и кока-кола не могут подаваться вместе, так как продуктовые товары не могут быть переданы по цепочке обещаний.
Вот как с помощью async/await можно легко решить эту проблему.
Здесь решен вопрос с передачей массива productItem. Поскольку с помощью async/await мы пишем наш асинхронный код так же, как мы пишем синхронный код. Следовательно, нет никакой несогласованности в передаче параметров, как это было при использовании .then().
2. Читаемость кода при объединении нескольких промисов в цепочку.
Хотя читаемость кода улучшается при использовании цепочки промисов с использованием .then(). Но с помощью async/await код читается последовательно, как работает наш мозг, что резко снижает сложность и улучшает читабельность. Это очень хорошо видно из вышеприведенного примера.
3. Улучшенная обработка ошибок
Если возникает ошибка, когда несколько промисов объединены в цепочку с использованием .then(), ее можно обработать с помощью метода .catch().
Если возникает ошибка, когда несколько промисов вызываются последовательно с использованием async/await, то ее можно обработать с помощью блока try/catch.
В обоих методах нет большой разницы. Однако использование блока try/catch делает код более структурированным и улучшает его читаемость.
Надеюсь, из приведенных выше двух фрагментов кода ясно, что использование try/catch улучшает структуру.
Выполнение обещаний javascript на уровне потока
Когда обещание выполняется, основной поток не ждет, пока обещание не будет выполнено. Пока обещание не будет разрешено, выполняется следующий синхронный код. Давайте разберемся в этом с помощью примера.
В приведенном выше примере обещание, представленное в servePasta(), будет выполнено за две секунды. Однако основной поток не ждет две секунды; вместо этого он выполняет следующий синхронный код и вызывает функцию обратного вызова после разрешения промиса. Следовательно, сначала печатается строка after promise execution, а затем строка from promise.
Выполнение javascript async/await на уровне потока
Когда обещание ожидается, основной поток ожидает завершения обещания. Он начинает выполнение другого синхронного кода только тогда, когда обещание разрешено. Давайте разберемся в этом с помощью примера.
В приведенной выше функции обещание, представленное в servePasta(), будет выполнено за две секунды. Основной поток ждет две секунды, сначала завершает выполнение промиса, и, следовательно, печатается строка from promise. Затем основной поток продолжает выполнение синхронного кода и печатает строку after promise.
Хотя async/await может замедлить выполнение кода. Но с помощью async/await мы пишем асинхронный код так же, как мы пишем синхронный код.
В следующем блоге я напишу об очередях обратных вызовов и очередях микрозадач, которые помогут вам понять внутреннюю работу обратных вызовов и обещаний.
Я надеюсь, что в этой серии блогов об асинхронном javascript такие темы, как обратный вызов, промисы и асинхронность/ожидание, станут более понятными. Не стесняйтесь комментировать ниже, если у вас есть какие-либо сомнения или предложения…..
