Яку проблему вирішують async & await в JS?

Асинхронне виконання коду - одна з найпотужніших фіч JavaScript, і в той же час воно приносить багато головного болю. Ми пройшли довгий шлях від функцій-колбеків, через нескінченні хащі сторонніх бібліотек для реалізації промісів, до дійсно нативних промісів в ES2015.

doAsyncThing(function (err, res) {  
  if (!!err) {
    // Оброка помилки
  }
  doAnotherAsyncThing(res + 1, function (err, res) {
    if (!!err) {
      //Обробка помилки
    }
    // і так глибше, до самих недр колбек-пекла
  })
})

doAsyncThing()  
.then(function (res) {
  return doAnotherAsyncThing(res + 1)
})
.then  // ...

Функції-стрілочки роблять використання промісів ще лаконічнішим.

doAsyncThing()  
.then(res => doAnotherAsyncThing(res + 1))
.then  // ...

Це все, звісно, круто, але все ще значно складніше, ніж синхронний код.

А в чому проблема?

Погляньте не цей досить простий синхронний код:

function getRawData() {  
  return 100
}

function getDoubledData() {  
  const data = getRawData()
  console.log(data)
  return data * 2
}

Просто, чи не так? Але якщо data потрібно отримувати від стороннього API? Ну, за допомогою промісів можна зробити щось типу такого:

function getRawData() {  
  return Promise.resolve(100)
}

function getDoubledData() {  
  return (
    getRawData()
    .then(data => {
      console.log(data)
      return data
    })
    .then(data => data * 2)
  )
}

Так, спірний виграш в читабельності коду. Але крім того, getDoubledData() повністю змінила свою структуру. Більше немає встановлення змінної, з'явилося декілька анонімних функцій, і найголовніше: повністю змінився спосіб виклику getRawData().

async та await

Саме ці два ключових слова є найгарячішими новинками JS. Саме вони дозволять вам писати код, що виглядає як синхронний, але дозволяє використовувати всю потужність підходи піди-зробись-ще-щось-поки-я-чекаю.

Давайте я покажу як ними користуватися.

async function getRawData() {  
  return Promise.resolve(100)
}

async function getDoubledData() {  
  const data = await getRawData()
  console.log(data)
  return data * 2
}

От тепер можна дивуватися. Цей код такий самий як і синхронний варіант, але з трьома невеличкими ключовими словами. Ніякої зміни архітектури.

Цей приклад не є надуманим, навпаки, це досить поширена проблема взаємодії синхронного коду з API. Тепер же не потрібно реструктуризувати половину вашого додатку.

Коли я зможу це використовувати? Я ХОЧУ ТУТ І ЗАРАЗ!

Притримай коней, друже. Як і зі всіма новими фічами JS, з ним не все так просто. Вони вже доступні в Chrome 55. Також ви, як завжди, можете використовувати Babel. Також ви можете спробувати написати код на async&await онлайн. Ось код із статті.