Пара Async / Await - альтернативный способ обработки асинхронных вызовов в JavaScript. Этот блог поможет вам понять, что такое Async / Await и где их можно использовать.

Что такое асинхронный?

async - это ключевое слово, которое можно добавить перед любой функцией. Когда он помещается перед функцией, он гарантирует, что функция возвращает обещание.

Чтобы использовать функцию async, вам нужно будет разрешить ее, используя традиционный подход обещания / обратного вызова, как показано в приведенном ниже коде:

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

Что ждет?

await - еще одно ключевое слово в JavaScript, которое можно использовать в блоке, объявленном как async. await не имеет смысла и не существует без async.

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

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

Если вы выполните указанную выше программу, вы узнаете, что await только гарантирует, что блок async ждет. Это не мешает JavaScript выполнять другие операции.

Как мы можем обрабатывать ошибки в блоке async / await?

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

Цепочка нескольких асинхронных вызовов с использованием Async / Await.

Поскольку async / await делает код более простым, он, вероятно, не убеждает нас пойти на это вместо обещания. Это должно добавить еще несколько ценностей в сложные ситуации. Что может быть сложнее в асинхронной обработке, чем объединение нескольких вызовов в цепочку с зависимостью друг от друга?

Постановка проблемы: вы должны отобразить userDetails самого высокого ученика в классе. У вас есть одна конечная точка, которая дает вам ID самого высокого ученика. У вас есть еще одна конечная точка, которая предоставляет сведения об учащемся для данного идентификатора.

Как бы вы разрешили эту ситуацию, используя async / await?

Решение 1. Использование async / await

Давайте решим ту же проблему, используя обещание и обратный вызов.

Решение 2. Использование цепочки обещаний

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

  1. Читаемость кода
    цепочка обещаний или вложенные обратные вызовы приводят к большой путанице. Код становится менее читабельным.
  2. Лаконичный и чистый код
    async / await, краткий и чистый код, который делает то же самое.
  3. Отладка:
    Поскольку код не разделен на внутренние обратные вызовы, разработчики могут легко просматривать строки и отлаживать код.

Спасибо за прочтение!