По-настоящему понимаю Async/Await

Асинхронное программирование — это способ обработки неблокирующих операций ввода-вывода в JavaScript, который позволяет коду работать эффективно и без блокировки основного потока. Одним из способов обработки асинхронных операций в JavaScript является использование обратных вызовов, но это может привести к аду обратных вызовов и трудному для чтения коду. Чтобы сделать асинхронный код более читабельным и понятным, в ES6 был представлен Promise, который является более современным способом обработки асинхронных операций. Однако с Promise все еще может быть сложно работать при работе со сложными цепочками асинхронных операций. Здесь появляется async/await.

async/await — это синтаксический сахар поверх Promise, упрощающий написание и чтение асинхронного кода. В этой статье мы подробно рассмотрим async/await и то, как он работает, на примерах.

Основы асинхронности/ожидания

Прежде чем мы углубимся в детали того, как работает async/await, давайте сначала рассмотрим простой пример, чтобы понять основной синтаксис async/await.

function getData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Data received');
    }, 2000);
  });
}

async function main() {
  const data = await getData();
  console.log(data);
}

main();

В этом примере у нас есть асинхронная функция getData(), возвращающая Promise, которая разрешается после 2-секундной задержки. Затем мы определяем другую функцию main(), которая использует async/await для ожидания разрешения Promise, возвращаемого getData(). После разрешения Promise значение сохраняется в переменной data и регистрируется в консоли.

Обратите внимание, что await можно использовать только внутри функции async. Когда await используется для ожидания разрешения Promise, выполнение функции async приостанавливается до разрешения Promise. Это позволяет коду выглядеть синхронным, хотя на самом деле он асинхронен внутри.

Обработка ошибок

В предыдущем примере мы предполагали, что Promise, возвращаемый getData(), всегда успешно разрешается. Однако на самом деле всегда есть шанс, что Promise может быть отклонено с ошибкой. Давайте обновим пример для обработки ошибок.

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const error = true;
      if (!error) {
        resolve('Data received');
      } else {
        reject(new Error('Failed to receive data'));
      }
    }, 2000);
  });
}

async function main() {
  try {
    const data = await getData();
    console.log(data);
  } catch (error) {
    console.error(error.message);
  }
}

main();

В этом обновленном примере мы добавили оператор if, который случайным образом решает, разрешить или отклонить ошибку Promise. Мы также обновили функцию main(), чтобы использовать блок try/catch для обработки ошибок. Если Promise отклоняется с ошибкой, ошибка перехватывается в блоке catch, и сообщение об ошибке выводится на консоль.

Параллельное исполнение

Одним из преимуществ async/await является то, что он позволяет нам выполнять асинхронные операции параллельно, что может привести к более быстрому выполнению кода. Давайте рассмотрим пример, демонстрирующий параллельное выполнение с использованием Promise.all().

function getData1() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Data 1 received');
    }, 2000);
  });
}

function getData2(data) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Data 2 received');
    }, 3000);
  });
}

async function main() {
const [data1, data2] = await Promise.all([getData1(), getData2()]);
console.log(data1, data2);
}

main();

В этом примере у нас есть две асинхронные функции getData1() и getData2(), которые возвращают Promise объектов, которые разрешаются после 2-секундной и 3-секундной задержки соответственно. В функции `main()` мы используем Promise.all() для ожидания параллельного разрешения обоих объектов Promise. Результаты обоих объектов Promise сохраняются в переменных data1 и data2 соответственно, а затем выводятся на консоль.

Последовательное исполнение

Иногда нам нужно запускать асинхронные операции последовательно, когда одна операция зависит от результата предыдущей операции. async/await упрощает это, позволяя нам связывать асинхронные операции с помощью await. Давайте рассмотрим пример, демонстрирующий последовательное выполнение.

function getData1() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Data 1 received');
    }, 2000);
  });
}

function getData2(data) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(`${data}, Data 2 received`);
    }, 3000);
  });
}

async function main() {
  const data1 = await getData1();
  const data2 = await getData2(data1);
  console.log(data2);
}

main();

В этом примере у нас есть две асинхронные функции getData1() и getData2(), которые возвращают Promise объектов, которые разрешаются после 2-секундной и 3-секундной задержки соответственно. В функции main() мы сначала вызываем getData1() и ждем его разрешения с помощью await. После разрешения Promise результат сохраняется в переменной data1. Затем мы вызываем getData2() и передаем переменную data1 в качестве аргумента и ждем ее разрешения с помощью await. После разрешения Promise результат сохраняется в переменной data2, а затем выводится на консоль.

Заключение

В заключение, async/await — это мощный инструмент в JavaScript для написания и чтения асинхронного кода. Это делает код более читабельным и простым для понимания, особенно при работе со сложными цепочками асинхронных операций. В этой статье мы рассмотрели основы async/await, обработку ошибок, параллельное выполнение с использованием Promise.all() и последовательное выполнение с использованием await. Обладая этими знаниями, вы сможете писать асинхронный код более эффективно и результативно.

Спасибо за прочтение!

Я надеюсь, что вы нашли эту статью полезной. Если у вас есть какие-либо вопросы или предложения, пожалуйста, оставляйте комментарии. Ваши отзывы помогают мне стать лучше.

Не забудь подписаться⭐️

Страница Facebook: https://www.facebook.com/designTechWorld1

Страница в Instagram: https://www.instagram.com/techd.esign/

Канал YouTube: https://www.youtube.com/@tech..Design/

Твиттер: https://twitter.com/sumit_singh2311

Используемое оборудование:

Ноутбук: https://amzn.to/3yKkzaC

Смотрите:https://amzn.to/41cialm

Вы можете предпочесть React Book: https://amzn.to/3Tw29nx

Некоторые дополнительные книги, связанные с языками программирования:

https://amzn.to/3z3tW5s

https://amzn.to/40n4m6O