Requisições

Para fazermos requisições a API, utilizamos o objeto API_CLIENT, uma instância da biblioteca axios.

Informação

Uma instância do axios é um objeto de requisição com configurações constantes. No nosso caso, definimos uma URL padrão, e a obtenção automática do token do usuário, assim facilitando as requisições.

Para fazermos uma requisição a API, utilizamos os seguintes métodos:

import API_CLIENT from "../hooks/useApi";

//Requisição com método GET
const response = API_CLIENT.get("/endpoint");

//Requisição com método POST com body
const response = API_CLIENT.post("/endpoint", objetoBody);

//Requisição com método PUT com body
const response = API_CLIENT.put("endpoint", objetoBody);

//Requisição com método DELETE
const response = API_CLIENT.delete("endpoint");

Os métodos de requisições nos retornam um objeto de resposta contendo:

• data: Dados retornados da chamada
• status: Código de retorno (200, 400, 500)

Caso seja uma requisição para um endpoint de paginação, temos em data os seguintes campos:

Campo	Tipo	Descrição
content	any[]	Dados retornados na página
empty	boolean	Indica se a página retornada é vazia (sem dados)
first	boolean	Indica se a página retornada é a primeira
last	boolean	Indica se a página retornada é a última
number	number	Número da página
numberOfElements	number	Número de elementos na página
size	number	Tamanho máximo da lista
totalElements	number	Total de elementos para retornar
totalPages	number	Total de páginas

Pasta Services

Todas as requisições são feitas como funções, dentro do arquivo de sua categoria na pasta "services". Por exemplo, uma função para buscar um usuário por id ficaria no arquivo "UsuarioService.ts" e seria da seguinte maneira:

//Nome descritivo para a requisição
function findUsuarioById(id: number /*Parametros e body's necessários*/) {
    // É retornada a requisição em andamento
    return API_CLIENT.get(`exemploGetUsuario/${id}`);
}

Para utilizar em uma página, sempre envolva a requisição em um bloco try-catch-finally, para que o tratamento de erros seja feito:

    ...
    try {
        ...
        const response = await findUsuarioById(32);
        ...
    } catch(e) {}
    finally{
        ...
    }
    ...

Atenção

No bloco try, sempre ativamos o loading, fazemos a requisição e todo o resto que a função deve fazer.
O bloco catch normalmente ficará vazio, pois os interceptors cuidarão do tratamento de erros.
No bloco finally, normalmente desativamos o loading, pois este bloco sempre será acessado, independente de erros na requisição, assim evitando um loading infinito.