Мощная пара ключевых слов в стандартном 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 следующим образом:
- Используйте Bluebird или утилиту. promicuity (Node 8 и выше), чтобы превратить функции обратного вызова NodeJS в Promise.
- Используйте async/await для получения результатов от этих промисов.