async / await в JavaScript async / await - это специальный | Типичный Awento

async / await в JavaScript

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

async – всегда возвращает promise. Ключевое слово “async” ставится перед function name (смотри пример ниже)

Пример:
async function sayName () {
return 'My name is Denis';
}

sayName().then((res) => console.log(res))

в этом примере, функция возвращает promise, и при помощи метода “.then” - выводим результат - “My name is Denis”

Ключевое слово await заставляет интерпретатор ждать, пока promise не выполнится.
Только после выполнения promise код будет отрабатывать дальше

Пример:

function getName () {
return new Promise((resolve, reject) => {
setTimeout(() => resolve('My name is Denis'), 3000)
})
}

async function showName () {
document.body.innerHTML = await getName();
}

showName();

из примера выше видно, что внутри асинхронной функции showName() вызывается асинхронная функция getName(), к которой применяется оператор await. Благодаря этому у нас больше нет необходимости для promise применять метод “.then”, a результат мы можем напрямую получить при вызове функции getName(). Получается, что при вызове showName() внутрь body вставляется строка ‘My name is Denis’

async/await - прекрасный инструмент, который позволяет писать более красивый и читабельный код

важно знать, что:
await нельзя использовать внутри простых функций, только внутри async-функций
await нельзя использовать на верхнем уровне вложенности, а только внутри тела функции, перед которой стоит async

Если вы никогда не использовали async/await, советую вам более детально изучить информацию про данный синтаксис, т.к. в этом посте показаны базовые вещи