DRY & KISS Principles

How does this API request implementation violate the DRY principle in a React application?

function UserComponent() {
  const fetchUser = async (id) => {
    try {
      const response = await fetch(`/api/users/${id}`);
      if (!response.ok) throw new Error('Failed to fetch user');
      return await response.json();
    } catch (error) {
      console.error('Error fetching user:', error);
      throw error;
    }
  };
}

function ProductComponent() {
  const fetchProduct = async (id) => {
    try {
      const response = await fetch(`/api/products/${id}`);
      if (!response.ok) throw new Error('Failed to fetch product');
      return await response.json();
    } catch (error) {
      console.error('Error fetching product:', error);
      throw error;
    }
  };
}

The components should be combined
The function names are too similar
The fetch logic is duplicated
This code violates DRY by duplicating the fetch logic, error handling, and response processing across components. A better approach would be to create a reusable API client: const apiClient = { async fetch(endpoint, options = {}) { try { const response = await fetch(`/api/${endpoint}`, options); if (!response.ok) throw new Error(`Failed to fetch ${endpoint}`); return await response.json(); } catch (error) { console.error(`Error fetching ${endpoint}:`, error); throw error; } } }; // Usage in components: const user = await apiClient.fetch(`users/${id}`); const product = await apiClient.fetch(`products/${id}`);
The error messages are not detailed enough

Next Question (7/20)