Fetch / XHR: Работа с асинхронным кодом js на основе промисов

async/await — это современный синтаксис для работы с асинхронным кодом на основе промисов. Он позволяет писать код линейно, как в синхронном стиле, но без блокировки потока.

• async перед функцией делает так, что она всегда возвращает Promise
• await приостанавливает выполнение функции, пока промис не выполнится
• В await можно передавать любой промис: запросы, таймеры, операции с файлами

1. Простой пример

async function hello() 
{
	return 'Привет';
}

hello().then(msg => console.log(msg)); // Привет

2. С await

async function getNumber() 
{
	const num = await Promise.resolve(42);
	console.log(num); // 42
}
getNumber();

3. С запросом

async function loadUsers() 
{
	const res = await fetch('https://jsonplaceholder.typicode.com/users');
	const users = await res.json();
	console.log(users.length, 'пользователей');
}
loadUsers();

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

async function safeRequest(url) 
{
	try 
	{
		const res = await fetch(url);
		if (!res.ok) throw new Error(`HTTP ${res.status}`);
		return await res.json();
	} 
	catch (err) 
	{
		console.error('Ошибка:', err.message);
	}
}

async/await поддерживается всеми современными браузерами, кроме IE 11 (и старее).