Примеры клиентского кода

GET запрос с использованием Async/Await

Современный способ работы с асинхронными операциями.

async function getData() {
    try {
        const response = await fetch('/api/users');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const users = await response.json();
        renderUsers(users);
    } catch (error) {
        console.error('Fetch error:', error);
    }
}

POST запрос (отправка формы)

Пример отправки данных формы на сервер в формате JSON.

const form = document.querySelector('form');

form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());

    const response = await fetch('/api/submit', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    });
});

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

Как правильно отображать ошибки пользователю.

function showError(message) {
    const errorDiv = document.createElement('div');
    errorDiv.className = 'error-message';
    errorDiv.textContent = message;
    document.body.prepend(errorDiv);
    
    setTimeout(() => errorDiv.remove(), 5000);
}