Эти языковые функции 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();
  }
})();

Если у вас есть вопросы по примерам кода или руководству, дайте мне знать.