Как получить данные с помощью GET запроса?

GET запрос для получения данных

GET запрос - это один из наиболее часто используемых HTTP методов для получения данных с сервера. В JavaScript существует несколько способов выполнить GET запрос.

1. Fetch API (современный способ)

// Простой GET запрос
const response = await fetch('https://api.example.com/users');
const data = await response.json();
console.log(data);

// С обработкой ошибок
try {
  const response = await fetch('https://api.example.com/users');
  
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  
  const data = await response.json();
  console.log('Данные получены:', data);
} catch (error) {
  console.error('Ошибка при запросе:', error);
}

2. Fetch с параметрами

// Параметры в URL (query string)
const userId = 123;
const response = await fetch(`https://api.example.com/users/${userId}`);
const user = await response.json();

// С фильтрами и поиском
const params = new URLSearchParams({
  page: 1,
  limit: 10,
  search: 'Алексей',
  sort: 'name'
});

const response = await fetch(`https://api.example.com/users?${params}`);
const data = await response.json();

// Результат: /users?page=1&limit=10&search=Алексей&sort=name

3. Fetch с заголовками

// Добавление заголовков (headers)
const response = await fetch('https://api.example.com/users', {
  method: 'GET', // явно указать метод (необязательно для GET)
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_TOKEN',
    'Custom-Header': 'value'
  }
});

const data = await response.json();
console.log(data);

4. Fetch с cookies

// Отправить cookies вместе с запросом
const response = await fetch('https://api.example.com/users', {
  credentials: 'include' // отправлять cookies для CORS запросов
});

const data = await response.json();

// Опции credentials:
// 'omit' - не отправлять cookies (по умолчанию)
// 'same-origin' - отправлять только для same-origin запросов
// 'include' - отправлять для всех запросов

5. Обработка разных типов ответов

const response = await fetch('https://api.example.com/users');

// JSON
const jsonData = await response.json();

// Текст
const textData = await response.text();

// Blob (для файлов)
const blobData = await response.blob();

// ArrayBuffer
const bufferData = await response.arrayBuffer();

6. Axios (альтернатива Fetch)

import axios from 'axios';

// Простой GET запрос
const { data } = await axios.get('https://api.example.com/users');
console.log(data);

// С параметрами
const { data } = await axios.get('https://api.example.com/users', {
  params: {
    page: 1,
    limit: 10
  }
});

// С заголовками
const { data } = await axios.get('https://api.example.com/users', {
  headers: {
    'Authorization': 'Bearer token'
  }
});

// С обработкой ошибок
try {
  const { data } = await axios.get('https://api.example.com/users');
  console.log(data);
} catch (error) {
  console.error('Ошибка:', error.message);
  console.error('Статус:', error.response?.status);
}

7. React компонент с GET запросом

import { useState, useEffect } from 'react';

const UserList = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    const fetchUsers = async () => {
      try {
        setLoading(true);
        const response = await fetch('https://api.example.com/users');
        
        if (!response.ok) {
          throw new Error('Ошибка загрузки данных');
        }
        
        const data = await response.json();
        setUsers(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
    
    fetchUsers();
  }, []);
  
  if (loading) return <div>Загрузка...</div>;
  if (error) return <div>Ошибка: {error}</div>;
  
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

8. Кеширование GET запроса

const cache = new Map();

const fetchWithCache = async (url) => {
  // Проверить кеш
  if (cache.has(url)) {
    console.log('Данные из кеша');
    return cache.get(url);
  }
  
  // Получить данные
  const response = await fetch(url);
  const data = await response.json();
  
  // Сохранить в кеш
  cache.set(url, data);
  
  return data;
};

// Использование
const data1 = await fetchWithCache('/api/users'); // запрос
const data2 = await fetchWithCache('/api/users'); // из кеша

9. Отмена GET запроса

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

// Выполнить запрос с возможностью отмены
const promise = fetch('https://api.example.com/users', { signal });

// Отменить запрос через 5 секунд
const timeoutId = setTimeout(() => {
  controller.abort();
  console.log('Запрос отменен');
}, 5000);

try {
  const response = await promise;
  const data = await response.json();
  clearTimeout(timeoutId);
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('Запрос был отменен');
  }
}

10. Интерцептор запросов (Axios)

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com'
});

// Добавить токен ко всем запросам
axiosInstance.interceptors.request.use((config) => {
  const token = localStorage.getItem('authToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// Обработка ошибок ответа
axiosInstance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      // Переадресовать на логин
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

// Использование
const { data } = await axiosInstance.get('/users');

Сравнение: Fetch vs Axios

Рекомендации

1. Используй try-catch - всегда обрабатывай ошибки
2. Проверяй response.ok - не все ошибки кидают исключение
3. Используй AbortController - для отмены запросов
4. Кешируй данные - если нужны повторные запросы
5. Добавляй таймауты - чтобы запрос не висел бесконечно
6. Валидируй данные - проверяй структуру ответа
7. Обрабатывай loading/error состояния - показывай пользователю статус