Методы выполнения GET запросов в среде JavaScript

Расширенные примеры GET запросов

Загрузка текстового файла

  async function getText() {
    const response = await fetch('/file.txt');
    const text = await response.text();
    console.log(text);
  }
  getText();

  (Вывод содержимого файла в виде строки)

Используется для загрузки HTML-фрагментов, конфигураций, логов.

Загрузка бинарных данных (Blob)

  async function getImage(url) {
    const response = await fetch(url);
    const blob = await response.blob();
    const imgUrl = URL.createObjectURL(blob);
    document.getElementById('myImg').src = imgUrl;
  }
  getImage('https://example.com/image.png');

  (Изображение отображается на странице)

Полезно для скачивания изображений, видео и других нетекстовых данных.

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

  async function getMultiple() {
    const urls = ['/api/a', '/api/b', '/api/c'];
    const promises = urls.map(url => fetch(url).then(res => res.json()));
    const results = await Promise.all(promises);
    console.log(results); // [dataA, dataB, dataC]
  }
  getMultiple();

  [ { ... }, { ... }, { ... } ]

Ускоряет загрузку независимых данных.

Повторная попытка при неудаче (retry)

  async function fetchWithRetry(url, retries = 3, delay = 1000) {
    for (let attempt = 1; attempt <= retries; attempt++) {
      try {
        const response = await fetch(url);
        if (!response.ok) throw new Error('Status ' + response.status);
        return await response.json();
      } catch (err) {
        if (attempt === retries) throw err;
        await new Promise(r => setTimeout(r, delay * attempt));
      }
    }
  }
  fetchWithRetry('https://api.example.com/unstable').then(console.log);

Повышает надёжность при временных сбоях.

Использование AbortController для отмены запроса

  const controller = new AbortController();
  setTimeout(() => controller.abort(), 2000);
  fetch('https://httpstat.us/200?sleep=5000', { signal: controller.signal })
    .then(res => res.text())
    .then(console.log)
    .catch(err => {
      if (err.name === 'AbortError') {
        console.log('Запрос отменён пользователем');
      }
    });

  Запрос отменён пользователем

Полезно при переходе между страницами или отмене поиска.

Установка пользовательских заголовков через XMLHttpRequest

  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.example.com/auth');
  xhr.setRequestHeader('X-Custom-Header', 'value');
  xhr.withCredentials = true; // для отправки куки
  xhr.onload = () => console.log(xhr.responseText);
  xhr.send();

  (Ответ сервера)

Необходимо для аутентификации и работы с сессиями.

Получение заголовков ответа

  fetch('https://api.example.com/data')
    .then(response => {
      console.log('Content-Type:', response.headers.get('Content-Type'));
      console.log('Date:', response.headers.get('Date'));
      return response.json();
    });

  Content-Type: application/json
  Date: Tue, 01 Apr 2025 10:00:00 GMT

Используется для проверки кэширования, формата и т.д.

Кэширование запроса с помощью cache API

  async function cachedFetch(url) {
    const cache = await caches.open('my-cache');
    let response = await cache.match(url);
    if (response) {
      return response.json();
    }
    response = await fetch(url);
    cache.put(url, response.clone());
    return response.json();
  }
  cachedFetch('https://api.example.com/data').then(console.log);

Снижает нагрузку на сеть при повторных запросах.