Эти языковые функции JavaScript были доступны уже некоторое время, но если у вас еще не было возможности с ними познакомиться, этот пост может помочь.
Вы можете просканировать приведенные ниже примеры кода или следовать этому быстрому интерактивному руководству, в зависимости от того, что вам больше подходит.
Примечание. Это руководство предназначено для тех, кто знаком с основами JavaScript, но сочтет полезным попрактиковаться в написании асинхронного кода.
Для чего нужны обещания и async / await?
Когда вы сейчас пишете JavaScript для веб-приложения, у вас почти наверняка будет асинхронный код.
Независимо от того, запускаете ли вы анимацию или получаете данные из внешнего API, важно, чтобы какой-то код не блокировал выполнение другого кода.
Также важно, чтобы некоторый код дождался завершения асинхронного действия перед его выполнением.
К счастью, современный JavaScript дает нам несколько инструментов для работы с различными асинхронными сценариями, причем аккуратным и понятным способом (если вы к нему привыкнете 😄).
Для получения дополнительной информации может быть полезна эта статья разработчиков Google.
Как использовать их в моем проекте (ах)?
Если вам нравятся интерактивные уроки с реалистичными примерами, я сделал этот. Это поможет вам написать код для следующих сценариев:
- Показывать информацию профиля пользователя после ее получения с помощью вызова API.
- Запустите серию анимаций по порядку
- Прочтите файл CSV и обновите каждую строку асинхронно, ожидая, пока они все будут завершены, прежде чем отображать их
- Получите несколько пользователей, обновляя индикатор выполнения по мере извлечения каждого из них
Щелкните здесь, чтобы начать пошаговое руководство. И если вы обнаружите, что шаги в какой-то момент неясны, не стесняйтесь запросить разъяснения, открыв вопрос или отправив мне твит.
В качестве альтернативы, если вам просто нужны быстрые примеры синтаксиса, я перечислил некоторые из них ниже.
Покажи мне быстрые примеры синтаксиса!
В ПОРЯДКЕ! Вот основные примеры, которые следует знать:
1. Базовый синтаксис обещания
const timeout = ms => { return new Promise(resolve => { window.setTimeout(resolve, ms); }); };
Или как однострочный:
const timeout = ms => new Promise(resolve => window.setTimeout(resolve, ms));
2. Используйте then () для связывания кода после выполнения обещания.
aPromise().then(result => { // do one thing with the result and optionally // return a value for further chaining return result; }).then(result => { // can now do another thing with the result if you like })
3. Уменьшите вложенность кода с помощью await.
До:
function getData() { anApiRequest().then(data => { displayOnPage(data); }) }
После:
async function getData() { const data = await anApiRequest(); displayOnPage(data); }
4. Подождите, пока не вернутся несколько обещаний, прежде чем что-то делать.
Promise.all( // call multiple promises here ).then(result => { // you get here if all promises resolve }).catch(error => { // you end up here if any of the promises are rejected }).then(() => { // this will be called regardless })
5. Дождитесь появления нескольких обещаний, выполняя какие-либо действия после каждого.
const promises = [aPromise, aPromise, aPromise]; (async function() { for (let i = 0; i < promises.length; i++) { await promises[i](); updateProgressBar(); } })();
Если у вас есть вопросы по примерам кода или руководству, дайте мне знать.