Serviços

Sobre

Camada que pode ser usada para abstrair a comunicação com APIs externas ou realizar operações complexas de negócios. Os serviços podem ser chamados de dentro de componentes ou hooks para realizar tarefas como buscar dados, enviar dados para um servidor, ou acessar armazenamento local.

Exemplo

Segue um exemplo de serviço em uma aplicação React que lida com a comunicação com uma API para buscar dados de usuários. Este serviço encapsulará as chamadas de API, mantendo essa lógica separada dos componentes da interface.

Serviço apiService.js

Este arquivo define funções que interagem diretamente com uma API externa. Aqui, estou usando o fetch para fazer chamadas HTTP, mas você poderia usar bibliotecas como Axios se preferir.

const BASE_URL = 'https://jsonplaceholder.typicode.com';
 
// Função para buscar usuários
export const fetchUsers = async () => {
  try {
    const response = await fetch(`${BASE_URL}/users`);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return await response.json();
  } catch (error) {
    console.error('Error fetching users:', error);
    throw error;
  }
};
 
// Função para buscar detalhes de um usuário específico
export const fetchUserById = async (userId) => {
  try {
    const response = await fetch(`${BASE_URL}/users/${userId}`);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return await response.json();
  } catch (error) {
    console.error(`Error fetching user with ID ${userId}:`, error);
    throw error;
  }
};

Como Usar o Serviço em um Componente React

Agora, vamos ver como você pode usar este serviço em um componente React. Para este exemplo, vou criar um componente funcional que usa um hook personalizado para carregar a lista de usuários ao iniciar.

import React, { useEffect, useState } from 'react';
import { fetchUsers } from './services/apiService';
 
const UserList = () => {
  const [users, setUsers] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    const loadUsers = async () => {
      setIsLoading(true);
      try {
        const usersData = await fetchUsers();
        setUsers(usersData);
      } catch (error) {
        setError('Failed to fetch users');
        console.error(error);
      } finally {
        setIsLoading(false);
      }
    };
 
    loadUsers();
  }, []);
 
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>{error}</div>;
 
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};
 
export default UserList;