Блог

В этой статье мы попытаемся понять, как именно асинхронность и ожидание работают в ES6. Давайте сначала попробуем понять, что такое асинхронность и ожидание, а также их использование, а затем мы увидим несколько примеров, в которых мы увидим, как мы можем использовать асинхронность и ожидание наряду с обычными функциями.

Асинхронность и ожидание:

• Асинхронность и Ожидание рассматриваются как специальные ключевые слова, предоставляемые ES6 для выполнения некоторых асинхронных операций с данными. Даже синхронные операции также могут выполняться с использованием этих ключевых слов.
• Ключевое слово Async используется вместе с объявлением функции, которое указывает, что эта функция теперь может принимать на себя все типы асинхронных событий.
• Другими словами, ключевое слово async используется вместе с функциями (или методами), что позволяет им легко получать все типы асинхронных данных.
• Использование асинхронного ключевого слова вместе с функциями всегда возвращает обещание в конце вместе с его состоянием (ожидание, разрешение или отклонение).
• Ожидание используется внутри асинхронной функции, которая, однако, полезна для целей ожидания результата.
• Wait в основном ожидает результатов, которые, в частности, должны быть извлечены из источника, из которого эта асинхронная функция собирается извлечь данные.
• Ожидание занимает немного времени, чтобы получить результаты из источника (например, API), а затем вместе с функцией async возвращает результат в виде обещания.
• Await также можно использовать, если асинхронность используется вместе с объявлением функции.

Работа асинхронно и в ожидании:

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

Теперь, когда мы разобрались в деталях, связанных с использованием Async/Await в обычных функциях, давайте рассмотрим некоторые из следующих примеров, которые в конечном итоге помогут нам понять вещи гораздо лучше.

Пример 1: 

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

<script>
	let dataDisplay = async () => {
	let data = await "ProgramBox";
	console.log(data);
	};
	console.log(1);
	dataDisplay();
	console.log("Hello");
</script>

Выход:

1
Hello
ProgramBox

Пример 2: 

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

<script>
	async function fetchMethod() {
	let response = await fetch(
		"https://reqres.in/api/products/3");
	let data = await response.json();
	console.log(data);
	}
	fetchMethod();
</script>

Выход: