Работа с сетью: технология AJAX

Расширенные примеры использования AJAX

1. Отправка формы с использованием FormData

const form = document.querySelector('form');
form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const formData = new FormData(form);
  try {
    const response = await fetch('/submit', { method: 'POST', body: formData });
    const result = await response.text();
    console.log('Результат:', result);
  } catch (error) {
    console.error('Ошибка отправки формы:', error);
  }
});

// Вывод при успехе: 'Форма отправлена' или 'Спасибо'

FormData автоматически собирает поля формы. Content-Type устанавливается как multipart/form-data.

2. Загрузка файла с индикацией прогресса (XMLHttpRequest)

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.upload.onprogress = (event) => {
  if (event.lengthComputable) {
    const percent = (event.loaded / event.total) * 100;
    console.log(`Загружено ${percent}%`);
  }
};
xhr.onload = () => console.log('Файл загружен');
const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
xhr.send(formData);

// Загружено 45%
// Загружено 100%
// Файл загружен

Событие progress на объекте upload позволяет отслеживать ход отправки. Fetch не поддерживает прогресс отправки напрямую.

3. Параллельные запросы с Promise.all

const urls = [
  'https://api.example.com/users',
  'https://api.example.com/posts'
];
Promise.all(urls.map(url =>
  fetch(url).then(res => {
    if (!res.ok) throw new Error('Ошибка ' + res.status);
    return res.json();
  })
))
.then(([users, posts]) => {
  console.log('Пользователи:', users);
  console.log('Посты:', posts);
})
.catch(error => console.error(error));

// Пользователи: [{id:1, name:'Иван'}, ...]
// Посты: [{id:10, title:'Пример'}, ...]

Promise.all ожидает завершения всех промисов. При отклонении любого из них срабатывает catch.

4. Запрос с кастомными заголовками и авторизацией

const token = 'my-secret-token';
fetch('https://api.example.com/secure', {
  headers: {
    'Authorization': `Bearer ${token}`,
    'X-Custom-Header': 'custom-value'
  }
})
  .then(response => response.json())
  .then(data => console.log(data));

// Данные защищённого ресурса

Кастомные заголовки передаются в объекте headers. Обратите внимание на CORS - сервер должен разрешать эти заголовки.

5. Отмена запроса при помощи AbortController (полный пример)

const controller = new AbortController();
const signal = controller.signal;

// Эмуляция медленного запроса
const fetchPromise = fetch('https://httpbin.org/delay/5', { signal });

// Отмена через 2 секунды
setTimeout(() => controller.abort(), 2000);

fetchPromise
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Запрос отменён по таймауту');
    } else {
      console.error('Ошибка:', err);
    }
  });

// Запрос отменён по таймауту

AbortController применим не только к fetch, но и к другим асинхронным операциям.

6. Обработка JSONP (для старых кросс-доменных запросов)

function jsonp(url, callbackName) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = `${url}?callback=${callbackName}`;
    window[callbackName] = (data) => {
      resolve(data);
      document.body.removeChild(script);
      delete window[callbackName];
    };
    script.onerror = () => reject(new Error('JSONP error'));
    document.body.appendChild(script);
  });
}

jsonp('https://api.example.com/data', 'myCallback')
  .then(data => console.log(data))
  .catch(error => console.error(error));

// { result: 'jsonp data' }

JSONP использует тег script для обхода CORS. Сервер должен поддерживать callback. Современные API чаще используют CORS, поэтому JSONP считается устаревшим.

7. Использование async iterators для потоковой обработки (fetch + ReadableStream)

async function* streamResponse(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    yield decoder.decode(value, { stream: true });
  }
}

(async () => {
  for await (let chunk of streamResponse('https://api.example.com/stream')) {
    console.log('Получен фрагмент:', chunk);
  }
})();

// Получен фрагмент: '{"id":1}'
// Получен фрагмент: ',{"id":2}'
// ...

Потоковое чтение полезно для больших ответов или событийных каналов (SSE).