Gestionar múltiples peticiones API puede convertirse en un auténtico caos si no tienes un patrón claro a seguir.

El truco

Antes (mal):

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    console.log(result);
  } catch (error) {
    console.error('Error:', error);
  }
}

// Llamar a diferentes endpoints de manera repetitiva
fetchData();
fetchData();
fetchData();

Después (bien):

interface ApiConfig {
  endpoint: string;
  method?: string;
}

async function apiRequest({ endpoint, method = 'GET' }: ApiConfig) {
  try {
    const response = await fetch(endpoint, { method });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

async function fetchData() {
  try {
    const data = await apiRequest({ endpoint: 'https://api.example.com/data' });
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

// Uso
fetchData();

Utiliza un patrón de función para las peticiones API que te permite centralizar la lógica de manejo de errores y procesamiento de respuestas. Esto no solo mejora la claridad del código, sino que también facilita la reutilización y el mantenimiento, especialmente cuando trabajas con múltiples endpoints.

Organiza tus peticiones API aplicando patrones para mantener el código limpio, eficiente y, sobre todo, legible.