Как организовать общий REST-запрос, который нужен нескольким страницам приложения, чтобы избежать дублирования кода?

Проблема дублирования

Когда несколько страниц приложения выполняют одинаковые REST-запросы, копирование кода приводит к избыточности и сложностям при изменениях. Если API-эндпоинт меняется, приходится править код в каждом месте. Решение — вынести общую логику запросов в отдельный модуль, который служит единой точкой доступа к API.

Создание сервисного слоя

Самый простой способ — создать файл, например api.js, и экспортировать функции для каждого запроса. Внутри используется fetch или axios. Такой подход называют сервисным слоем. Он инкапсулирует URL, заголовки, обработку ошибок и преобразование данных.

// api.js
export async function getUsers() {
  const response = await fetch('/api/users');
  if (!response.ok) throw new Error('Network error');
  return response.json();
}

export async function getUser(id) {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) throw new Error('Network error');
  return response.json();
}

Теперь на любой странице можно импортировать нужную функцию и использовать её. Это устраняет дублирование и делает код более предсказуемым.

Использование в компонентах

В React-приложении вызовы обычно происходят внутри хуков useEffect или в кастомных хуках. Например, можно создать хук useUsers, который загружает список и управляет состоянием загрузки и ошибок.

// useUsers.js
import { useState, useEffect } from 'react';
import { getUsers } from './api';

export function useUsers() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getUsers()
      .then(setUsers)
      .finally(() => setLoading(false));
  }, []);

  return { users, loading };
}

Такой хук можно использовать на любой странице, где нужен список пользователей. Если запрос требует параметров, их передают в функцию или хук.

Преимущества централизации

• Единая точка изменения URL или заголовков.
• Упрощение тестирования — можно мокать модуль api.
• Легче добавить общую обработку ошибок или кэширование.
• Код становится чище и читабельнее.

Вывод

Выносите общие REST-запросы в отдельный сервисный модуль или кастомные хуки. Это особенно полезно в средних и крупных приложениях, где много страниц работают с одними и теми же данными. Такой подход снижает риск ошибок и ускоряет разработку.