Hacer múltiples llamadas API directas en tus componentes puede llevar a un caos de mantenimiento y baja eficiencia.

El truco

Antes (mal):

async function fetchUser(userId: string) {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const userData = await response.json();
  return userData;
}

async function fetchPosts() {
  const response = await fetch('https://api.example.com/posts');
  const postsData = await response.json();
  return postsData;
}

Después (bien):

class ApiService {
  private baseUrl: string;

  constructor(base: string) {
    this.baseUrl = base;
  }

  async fetch(endpoint: string) {
    const response = await fetch(`${this.baseUrl}${endpoint}`);
    return response.json();
  }

  async fetchUser(userId: string) {
    return this.fetch(`/users/${userId}`);
  }

  async fetchPosts() {
    return this.fetch('/posts');
  }
}

const apiService = new ApiService('https://api.example.com');

async function getUserData(userId: string) {
  return apiService.fetchUser(userId);
}

async function getPostsData() {
  return apiService.fetchPosts();
}

Organizar tus llamadas API con una clase ApiService centralizada mejora la mantenibilidad y reutilización de tu base de código. Centraliza la lógica de las llamadas y aprovecha la capacidad de modificar la URL base desde un solo lugar. Además, encapsula los métodos HTTP, lo que simplifica las pruebas y futuros cambios.

Optimizar tu estructura de llamadas API te prepara para un código más limpio, eficiente y fácil de escalar.