​Обработка асинхронного кода.

Этот пост - как продолжение к предыдущему, так что сначала советую прочитать именно его.

В JavaScript мы имеем несколько возможных вариантов обработки асинхронного кода:
- асинхронные callback'и,
- промисы,
- синтаксис async/await.

Callback'и в этом посте мы не будем рассматривать. Остаются промисы и синтаксис async/await, которые идет, конечно, отдельными пунктами, но вообще-то стоит понимать, что в JavaScript операторы async/await - это не более чем синтаксический сахар, надстройка над промисами. Отсюда следует и то, что промисы и новый синтаксис могут использоваться совместно.

Перепишем код с использованием промиса:

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(console.log("Сообщение через 1500 мс"))
  }, 1500)
}).then(() => {
  console.log("Второе сообщение");
})

Что тут происходит?
1. Мы создаём новый Promise через конструктор.
2. Внутрь конструктора мы подаём функцию, которая принимает в себя 2 параметра: resolve и reject. Это две функции. Особенно углублять не будем, но когда вызывается resolve - промис считается выполненным, а когда reject - выбрасывается ошибка.
3. Метод then вызывается от нашего промиса, принимает в себя так же функцию (которая в свою очередь так же может принимать в себя параметры, но в этом примере они не нужны). Эта функция из метода then гарантированно выполнится после промиса.

И такой код даст нам ожидаемый результат:

// console out
Сообщение через 1500 мс
Второе сообщение

И таких методов then может быть много в цепочку:

new Promise(...).then(...).then(...).then(...) ... .catch(...)

Тут вы можете заметить ещё и метод catch. Он нам нужен для обработки ошибок в промисах.

Если совсем кратко, то вот так можно описать промисы. Они необходимы для понимания того, как работает синтаксис async/await в JavaScript. И этот синтаксис не применим к нашему примеру в чистом виде, потому что функция setTimeout не возвращает Promise, а, как я и сказал выше, без промисов async/await не работает. Но промис возвращает, например, fetch запрос. Fetch позволяет нам делать HTTP запросы и позвращает промис.

Попробуем:

async function getDataFromServer() {
  // сделаем запрос
  const response = await fetch('https://jsonplaceholder.typicode.com/todos')

  // обработаем данные
  const data = await response.json()

  return data
}

Эта функция сделает запрос на сервер, дождётся его, а после обработает данные и вернёт их. И самое главное - сделает это в той последовательности, в которой нам нужно. А так будет выглядеть наша функция, если мы будем использовать и промисы, и новый синтаксис:

async function getDataFromServer() {
  // сделаем запрос и преобразуем полученные данные
  return await fetch('https://jsonplaceholder.typicode.com/todos')
                      .then(response => response.json())
}

По моему, получается лаконичнее.

Примерно так. Не знаю как часто будут новые посты, но они точно будут. Надеюсь будет почаще.

#javascript #web