Зачем использовать Async и Await?

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

Консольное ведение журнала
всегда будет приводить к такому выводу в консоли:
Привет, мир
Линия 1 запускается первой, а линия 2 следует за ней.

Однако иногда нам нужно, чтобы наш код выполнялся асинхронно. Введите: асинхронно и ждите!


Асинхронно и ждать

Async и await используются с промисами. Размещение ключевого слова async перед функцией гарантирует, что функция вернет обещание. Ключевое слово await можно использовать только внутри асинхронной функции. Все, что следует после ключевого слова await, указывает Javascript ждать, пока промис не разрешится и не вернет свои результаты. Итак, когда мы можем захотеть использовать async и await?


Применение на практике

Завершая наши завершающие проекты для буткемпа, я помогал другу провести мозговой штурм о возможных способах функционирования ее приложения. Она хотела, чтобы пользователь нажимал на собаку, которую он хотел завести, а затем заполнял форму усыновления. Мы решили, что начальное событие клика создает запрос на публикацию, по сути, объединяя ее пользователя и приемного щенка, а затем перенаправляет пользователя на другую страницу, где он может ввести больше информации. Однако ее пост-функция подтолкнет пользователя на страницу формы до того, как обещание будет выполнено, а это означает, что у нас еще не было идентификатора для вновь созданной формы пожертвования, и поэтому мы не могли использовать этот идентификатор в нашем URL-адресе, а затем снова в нашем будущем запросе на исправление. после того, как пользователь заполнил форму. Чтобы решить эту проблему, мы познакомились с асинхронностью и ожиданием!

Во-первых, мы добавили ключевое слово async в нашу функцию. Мы установили для нашей выборки константу (res) и добавили ключевое слово await перед выборкой. Затем мы объявили новую константу (данные) и установили ее в наш res.json(), еще раз включив ключевое слово await. Ключевое слово await указывает JavaScript не переходить к следующей операции, пока предыдущая операция не будет разрешена.

Затем мы создали функцию с подходящим названием «перенаправление», которая направляет пользователя на страницу, где он может обновить остальную информацию формы. Наконец, мы вызываем функцию перенаправления, используя данные, которые мы получили из нашего промиса после того, как они были проанализированы в json.

Наш окончательный код:

Асинхронный и ожидающий код


Вывод

В заключение, async и await — отличный инструмент, который можно использовать, когда возникает необходимость в том, чтобы код JavaScript мог выполняться асинхронно. Хотя сегодня мы увидели только один отличный пример использования async и await, есть много других способов его использования, которые я с нетерпением жду в будущем.