Чтобы получить представление о том, почему люди так взволнованы функциями ES8 async/await, вы должны быть знакомы с эволюцией асинхронного поведения и решений в JS.

Обратные вызовы

Или, точнее, обратный вызов внутри обратного вызова внутри обратного вызова…

Обратные вызовы создают несколько проблем. За ними может быть трудно следовать, а также создавать их. Они жесткие по форме. Они уродливы и громоздки. В конечном итоге это привело к широкому распространению термина «ад обратного вызова».

Обратные вызовы служат своей цели, но когда вы начинаете работать с более сложными приложениями и шаблонами навигации со сложными реляционными данными, вам нужно лучшее решение. Введите ОБЕЩАНИЯ.

Обещания

Верните власть людям.

Обещание - это более изощренное решение асинхронных проблем в JS. Объект Promise представляет окончательное завершение (или сбой) асинхронной операции и ее результирующее значение. Обещание всегда находится в одном из трех состояний:

  • ожидает: начальное состояние, ни выполнено, ни отклонено.
  • выполнено: означает, что операция успешно завершена.
  • отклонено: это означает, что операция не удалась.

Отложенное обещание может быть выполнено или отклонено, после чего соответствующий обработчик вызывается через .then() для успешных операций и .catch() для ошибок.

Главное помнить: обещание представляет собой возможный результат асинхронной операции.

Давайте посмотрим на код:

Пример обещания из реального мира

Вы можете видеть, что строки 34–36 намного чище, чем наши примеры обратного вызова.

Улучшение, но здесь все еще есть проблемы. Вы все еще можете оказаться в многообещающей пирамиде гибели, как и в случае с обратными вызовами. Зацикливание обещаний требует нюансов и не интуитивно понятно. Вы также должны не забывать использовать такие вещи, как catch() и deferred.

Войдите в функции Async / Await.

Функции async / await в ES8

Теперь давайте посмотрим на новейшую итерацию асинхронных решений в JS - функцию async / await.

Объявление async function определяет асинхронную функцию, которая возвращает объект AsyncFunction.

Когда вызывается функция async, она возвращает Promise. Когда функция async возвращает значение, Promise будет разрешено с возвращенным значением. Когда функция async генерирует исключение или какое-либо значение, Promise будет отклонен с брошенным значением.

Функция async может содержать выражение await, которое приостанавливает выполнение асинхронной функции и ожидает переданного разрешения Promise, а затем возобновляет выполнение функции async и возвращает разрешенное значение.

Давайте посмотрим на код:

В этом примере вы увидите СТАНДАРТНОЕ ОБЕЩАНИЕ в действии, за которым следует тот же код, реализованный с помощью ASYNC / AWAIT.

Вместо цепочки обещаний (4–11) вы можете написать один и тот же код в одной функции (16–23).

Основная причина, по которой вы можете захотеть начать реализацию async / await в своем коде, заключается в том, что он позволяет вам писать код, который выглядит, а также выполняется асинхронно, не блокируя поток.

Вот и все, что касается функций Async / Await в ES6. Сообщите мне свои мысли и вопросы и подпишитесь на в твиттере. Продолжайте после этого.

Если вам понравилась эта статья, порекомендуйте и поделитесь, чтобы помочь другим найти ее!