Синтаксис async/await

В продолжение к посту о Promise, крайне актуально разобрать ещё один метод работы с асинхронным кодом, а именно — синтаксис async/await.

Ничего страшного и сложного, это такой же способ обработки асинхронных операций, только синтаксически он выглядит иначе.

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

Для того, чтобы разобраться, предлагаю пример запроса на сервер:

const data = fetch(`https:/some.api.com/users`)
 .then(response => {
  return response.json()
 })
 .then(users => {
  return users.map(...)
 })

Перепишем то же самое с использованием нового синтаксиса. Причём, обратите внимание, что ключевое слово await работает только в функциях, объявленных с помощью ключевого слова async, поэтому обернём запрос данных в функцию:

const getData = async () => {
 const response = await fetch('...')
 const users = await response.json()
 return users.map(...)
}

const data = getData()

Есть определённое ощущение, что код менее перегружен и выглядит проще, не так ли?

Причём важно помнить, что можно использовать обычные методы then, catch и другие даже в синтаксисе async/await, то есть следующий код абсолютно валидный:

const getData = async () => {
  // можем вызвать then у fetch, т.к.
  // fetch - это тоже промис
 const users = await fetch('...').then(res => res.json())
 return users.map(...)
}

const data = getData()

Крайне советую использовать обновлённый синтаксис, поскольку такой код проще рефакторить и читать, но и не забывайте о обычных промисах. Ну пожалуйста 🥲

Спасибо за прочтение, это важно для меня ❤️

#web #theory #javascript