Async/Await на тот момент, когда я написал эту статью, стал частью ES7 вместе с другими кандидатами. Идея состоит в том, чтобы предложить более чистый синтаксис для написания асинхронного кода, очень простой пример:

async function getAddress(){
  const response = await fetch('https://somesite.com/address') 
  console.log(response)
}

На первый взгляд, приведенный выше код очень прост и понятен даже без знания конкретных ключевых слов. Мы можем интерпретировать, что мы собираемся сделать HTTP-запрос для получения информации с сервера, как только мы получим информацию, мы распечатаем ее.

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

Функция, объявленная как function*, возвращает экземпляр Generator, это подтипы итераторов, которые включают дополнительные next и throw.

1  function doWhenGet(value){
2    return addressListRequest.next(value)
3  }
5  function* getAddress(){
6    const response = yield fetch('https://somesite.com/address') 
7    console.log(response)
8  }
9  const addressListRequest = getAddress()
10 const addressList = addressListRequest.next()
11 addressList.then(doWhenGet)

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

  1. Поскольку генераторы являются подтипом итераторов, их экземпляры включают функции .next(). Контекст выполнения не создается при вызове для установки адресаListRequest, но создается при выполнении инструкции .next().
  2. Yield — это оператор, подобный возврату, он позволяет вам выйти из выполнения, но продолжить с того места, где они остались, с помощью .next(), как это используется в строке 10, в примере, когда вызывается ключевое слово yield, ответ не назначается обещанию фасада еще не достал.
  3. Когда мы выполняем строку 10, мы помещаем обещание выборки в const addressList, поэтому, когда выполняется строка 11, мы помещаем функцию doWhenGet в очередь микрозадач JS для выполнения при получении ответа.
  4. Как только запрос получен, функция doWhenGet выполняется, внутри этого мы вызываем .next(), поэтому теперь мы можем продолжить с того места, где мы оставили выполнение внутри генератора (встроенный 6), результат запроса будет быть назначена константе ответа, а затем выполняется строка 7, показывающая значение, полученное с сервера.

Таким образом, мы можем писать асинхронные/ожидающие функции, используя генераторы в ES6. Вы можете найти больше информации о генераторах здесь, а если вы ищете список функций, включенных в ES6, ES7 и ES8, вы можете проверить здесь.

Впервые написано здесь.