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

Async/Await — это просто синтаксический сахар над промисами, но он заставляет асинхронный код выглядеть синхронным и, таким образом, намного легче следовать и рассуждать.

Как вы используете Async/Await?

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

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

const nonAsyncFunction = () => {
 return 5;
};
const res = nonAsyncFunction();
console.log(res); // 5

Когда мы запускаем обычную функцию и сохраняем результат в переменной res, мы видим, что значение действительно является фактическим возвращаемым значением функции, которое в данном случае равно 5.

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

const asyncFunction = async function() {
 return 5;
};
const res = asyncFunction();
console.log(res); // Promise { 5 }

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

asyncFunction().then((val) => console.log(val)); // 5

Но какая польза от этого? Сделав это сейчас, мы можем использовать await внутри функции. Await указывает JavaScript приостановить выполнение вашего кода до тех пор, пока операция, которую вы ожидаете, не завершится. Давайте посмотрим на пример.

const fetchResource = () => {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve('success');
  }, 5000);
 });
};
const asyncFunction = async () => {
 const res = await fetchResource();
 console.log(res); // success
};
asyncFunction(); // success is logged to the console after 5 sec.

В приведенном выше примере мы моделируем операцию, которая занимает около 5 секунд, используя функцию fetchResource. В нашей асинхронной функции мы используем ключевое слово await, чтобы указать JavaScript приостановить выполнение нашего кода до тех пор, пока функция fetchResource не вернет значение.

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

Вы не ограничены только одним использованием ключевого слова await в функции, и именно в этом заключается истинная сила async/await.

const asyncFunction = async () => {
 const res = await fetchResource();
 const res2 = await fetchResource2(res2);
 const res3 = await fetchResource3(res, res2);
 
 // run the rest of the function.
};

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

Как вы обрабатываете ошибки при использовании async/await?

Мы можем добавить блок try catch внутри функции, чтобы перехватывать любые возникающие ошибки и обрабатывать их в блоке catch.

const asyncFunction = async () => {
 try {
  const res = await fetchResource();
if(res.error) {
   throw new Error('The was an error fetching the resource')
  } else {
   // Run the rest of the function
  }
 } catch (e) {
  // handle any errors here.
  console.log(e);
 }
};

Вывод

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

Спасибо за чтение и, пожалуйста, оставьте комментарий ниже, если у вас есть какие-либо вопросы, и я отвечу, как только смогу.