Мощная пара ключевых слов в стандартном JavaScript ES2017.

Язык JavaScript является однопоточным, т. е. только один поток только для выполнения командной строки. Если работать под синхронным (синхронным), то при выполнении сложных вычислений, вызове AJAX-запроса к серверу, вызове базы данных (в NodeJS), этот поток перестанет ждать, чтобы сделать весь браузер… аварийным.

Чтобы избежать этого, большинство запросов кода AJAX или базы данных в JavaScript выполняются в режиме асинхронно. Изначально работающий асинхронный код в JavaScript стал реальностью благодаря обратному вызову (как код ниже).

// Pass callback to function ajax
var callback = function(image) {
   console.log(image);
};
ajax.get("hotgirl.info", callback);

// Can be abbreviated as follows
ajax.get("hotirl.info", function(image) {
   console.log(image);
})

Конечно, поскольку обратный вызов имеет некоторые недостатки, такие как подробный код, обратный вызов и т. д., люди создали новый шаблон под названием Promise!

Из обратного вызова обещание поступает в Async/Await.

Promise довольно хорошо решил проблемы обратного вызова. Код становится легче читать, разделять и подвергать ошибкам.

Тем не менее, использование промисов иногда немного раздражает, потому что мы должны передать обратный вызов в функцию then и catch. Код также будет немного избыточным и трудным для отладки, потому что все функции будут считаться одним оператором, поэтому невозможно отлаживать каждую строку по отдельности.

К счастью, в ES7 родилось чудо под названием async/await. (Я думаю на 99%, что это чудо ворует у великого C#, потому что в C# есть асинхронность/ожидание с тех пор, как он ушел из школы).

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

Как показано на рисунке выше, функция findRandomImgPromise — это асинхронная функция, которая возвращает промис. С помощью ключевого слова await мы можем считать эту функцию синхронной; следующий оператор может быть запущен только после возврата функции.

Зачем использовать асинхронность/ожидание?

Как я уже говорил, у async/await есть несколько преимуществ перед промисами:

  • Код читается гораздо легче, ничего ловить не нужно; напишите как код, работающий последовательно, а затем используйте обычный try/catch для отлова ошибок.
  • Написание цикла через каждый элемент становится чрезвычайно простым, ожидайте в каждом цикле.
  • Отладка намного проще, так как каждое ожидание использования считается одной строкой кода, поэтому вы можете настроить отладчик на отладку каждой строки как обычно.
  • При возникновении ошибки исключение будет указывать на ошибку в номере строки, но обычно не разрешается в промис.
  • С промисами или обратными вызовами объединение if/else или повторной попытки с асинхронным кодом является проблемой, потому что нам приходится писать сложный код. С async/await это очень просто.

Недостатки async/await

Конечно, у async/await есть и некоторые недостатки, о которых нужно помнить при использовании:

  • Он не может работать в старых браузерах. Если проект требует запуска в старых браузерах, вам придется использовать Babel для транспиляции кода в ES5 для запуска.
  • Когда мы ждем отклоненного промиса, JavaScript выдает исключение. Поэтому, если мы используем async-await и забываем try-catch, мы получим… проглоченные ошибки или код перестанет выполняться.
  • Асинхронность и ожидание должны быть вместе! await можно использовать только в асинхронных функциях. В противном случае будет синтаксическая ошибка. Следовательно, async/await будет распространяться на все функции в вашем коде.

Примените async/await к вашему коду

По сути, асинхронная функция вернет обещание, соответствующее Task в C#. Поэтому, чтобы эффективно использовать async/await, вы должны понимать механизм работы Promise!

В настоящее время последние версии Chrome, Edge и Firefox уже поддерживают async/await; если в проекте не требуется поддержка старых браузеров, смело используйте async/await, чтобы сделать код аккуратнее.

Кроме того, если вы используете NodeJS, вы можете использовать комбинацию Promisify + Async / Await следующим образом:

  1. Используйте Bluebird или утилиту. promicuity (Node 8 и выше), чтобы превратить функции обратного вызова NodeJS в Promise.
  2. Используйте async/await для получения результатов от этих промисов.