Fetch / XHR: Fetch запрос на чистом JavaScript с await

async/await — это удобный способ работать с промисами без леса .then(). Код становится линейным, а обработка ошибок — привычным try/catch.

Базовый GET с проверкой ошибок

async function fetchJson(url, {signal} = {}) 
{
	if (typeof url !== 'string' || !/^https?:\/\//.test(url)) 
	{
		throw new Error('Некорректный URL');
	}

	const response = await fetch(url, 
	{
		method: 'GET',
		mode: 'cors',
		credentials: 'same-origin',
		signal,
		headers: {
			'Accept': 'application/json'
		}
	});

	if (!response.ok) 
	{
		// сервер ответил, но статус не 2xx
		const text = await response.text().catch(() => '');
		throw new Error(`HTTP ${response.status}: ${text.slice(0, 300)}`);
	}

	// в идеале: проверять заголовок контента
	const contentType = response.headers.get('content-type') || '';
	if (!contentType.includes('application/json')) 
	{
		throw new Error('Ожидался JSON-ответ');
	}

	return response.json();
}

// Использование
(async () => {
	try 
	{
		const data = await fetchJson('https://api.example.com/users');
		console.log('Пользователи:', data);
	} 
	catch (err) 
	{
		console.error('Ошибка запроса:', err.message);
	}
})();

POST JSON с await

async function postJson(url, body, {signal} = {}) 
{
	if (typeof body !== 'object' || body === null) 
	{
		throw new Error('Тело запроса должно быть объектом');
	}

	const response = await fetch(url, 
	{
		method: 'POST',
		mode: 'cors',
		credentials: 'same-origin',
		signal,
		headers: {
			'Content-Type': 'application/json',
			'Accept': 'application/json'
		},
		body: JSON.stringify(body)
	});

	if (!response.ok) 
	{
		const text = await response.text().catch(() => '');
		throw new Error(`HTTP ${response.status}: ${text.slice(0, 300)}`);
	}

	return response.json();
}

// Использование
(async () => {
	try 
	{
		const payload = {email: 'test@example.com', password: '******'};
		const result = await postJson('/api/login', payload);
		console.log('Успешный вход:', result);
	} 
	catch (err) 
	{
		console.error('Не удалось авторизоваться:', err.message);
	}
})();