Асинхронная функция в JavaScript

Узнайте, как оптимизировать промисы с помощью async/await.

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

Разработчики обычно говорят о новом синтаксисе async/await как о группе, но на самом деле это два отдельных действия. Вы используете ключевое слово async, чтобы объявить, что инкапсулирующая функция будет использовать асинхронные данные. Внутри асинхронной функции вы можете использовать ключевое слово await, чтобы приостановить функцию до тех пор, пока не будет возвращено значение. Я хочу отметить одну вещь: это не заменяет обещания. Вы просто заключаете обещания в лучший синтаксис.

асинхронная функция — это функция, объявленная с использованием ключевого слова async, заставляющая функцию неявно возвращать обещание и позволяющая использовать ключевое слово await. Асинхронные функции — это синтаксис, альтернативный цепочке вызовов Promise.then.

Оператор ожидания указывает, что JavaScript должен дождаться выполнения промиса, прежде чем продолжить выполнение кода. Традиционно это доступно только в функциях async, но его также можно использовать на верхнем уровне модулей.

Синтаксис

Обратите внимание на использование ключевого слова async. Ставим его в начале объявления функции. А в случае стрелочной функции async ставится после знака равенства и перед круглыми скобками.

// With function declaration
async function myFn() {
  // await ...
}
// With arrow function
const myFn = async () => {
  // await ...
}
function myFn() {
  // await fn(); <--- Syntax Error since there's no async
}

Давайте рассмотрим простой пример. Сначала мы объявляем функцию gifts(), которая возвращает обещание, которое разрешается в значение 🎁🎁🎁 через 3 секунды. Затем мы объявляем async функцию msg() и await для разрешения промиса перед выводом сообщения на консоль.

function gifts() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('🎁🎁🎁');
    }, 3000);
  });
}

async function msg() {
  const msg = await gifts();
  console.log('Here you are:', msg);
}

msg(); // Here you are: 🎁🎁🎁 <-- after 3 seconds

Асинхронные функции действительно хороши, когда вы работаете с несколькими промисами. Они действительно могут очистить ваш код:

function data1() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Promises');
    }, 1000);
  });
}

function data2() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('are');
    }, 500);
  });
}

function data3() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('awesome!');
    }, 500);
  });
}

async function msg() {
  const a = await data1();
  const b = await data2();
  const c = await data3();

  console.log(`${ a } ${ b } ${ c }`);
}

msg(); // Promises are awesome! <-- after 2 seconds

Мы используем промисы во многих ситуациях, но чаще всего это когда вы получаете данные из API. Целью async/await является упрощение синтаксиса, необходимого для использования API-интерфейсов на основе обещаний.

Преимущества асинхронного/ожидания

Одним из самых больших преимуществ async/await является то, что он делает ваш код намного легче для чтения, чем код, основанный на обратном вызове. Поскольку в вашем коде больше не будет вложенных обратных вызовов или промисов, он станет более организованным и понятным с первого взгляда. Кроме того, поскольку ваши функции теперь могут возвращать значения напрямую, а не полагаться на обратные вызовы или промисы, вы также можете использовать их в более традиционных контекстах программирования, таких как циклы и условия, не беспокоясь о сложных обходных путях или проблемах вложенности. Кроме того, async/await значительно упрощает обработку ошибок, поскольку ошибки, возникающие внутри асинхронной функции, автоматически перехватываются окружающим блоком try-catch (в отличие от обратных вызовов). Это значительно упрощает отладку, поскольку любые ошибки, возникающие во время выполнения, легко выявляются и соответствующим образом устраняются.

В заключение

Async/await — отличное новое дополнение к JavaScript, которое значительно упрощает работу с асинхронным кодом. Это позволяет вам писать синхронно выглядящий код, который выполняется асинхронно. Это может быть очень полезно, когда вы пытаетесь сохранить ваш код чистым и легко читаемым. Попробуйте это в своем следующем проекте!