🧩 Exercícios: Consumo de APIs REST com Axios e Interceptors

Spec Frontend Com Vue • Trilha Progressiva em 4 Níveis

---

🎯 Nível 1: Fundamentos

Problema 15.1 — Instância Centralizada do Axios com BaseURL e Headers

Contexto: Instância Centralizada do Axios com BaseURL e Headers no contexto de Consumo de APIs REST com Axios e Interceptors.

Requisitos de Execução:

1. Criar instância api = axios.create({ baseURL: 'https://api.empresa.com/v1' }) com timeouts.

Resultado Esperado

Cliente HTTP Axios instanciado e configurado.

📤 Instruções de Entrega (Microsoft Teams)

1. Salve o arquivo como: Atividade_15_1_SeuNome
2. Envie na tarefa: Atividade Cap 15 - Consumo de APIs REST com Axios e Interceptors

🔑 Gabarito de Código & Solução Comentada

// api/httpClient.ts
import axios from 'axios';

export const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL || 'http://localhost:8080/api/v1',
  timeout: 10000,
  headers: { 'Content-Type': 'application/json' },
});

---

🔍 Nível 2: Prática

Problema 15.2 — Request Interceptor para Injeção de Bearer Token

Contexto: Request Interceptor para Injeção de Bearer Token no contexto de Consumo de APIs REST com Axios e Interceptors.

Requisitos de Execução:

1. Injetar token de autenticação do Pinia no cabeçalho Authorization de todas as requisições de saída.

Resultado Esperado

Bearer Token injetado automaticamente pelo interceptor de requisição.

📤 Instruções de Entrega (Microsoft Teams)

1. Salve o arquivo como: Atividade_15_2_SeuNome
2. Envie na tarefa: Atividade Cap 15 - Consumo de APIs REST com Axios e Interceptors

🔑 Gabarito de Código & Solução Comentada

// api/interceptors.ts
import { api } from './httpClient';
import { useAuthStore } from '@/stores/auth';

api.interceptors.request.use((config) => {
  const authStore = useAuthStore();
  if (authStore.token) {
    config.headers.Authorization = `Bearer ${authStore.token}`;
  }
  return config;
});

---

⚡ Nível 3: Integração

Problema 15.3 — Response Interceptor para Refresh Token Automático (Status 401)

Contexto: Response Interceptor para Refresh Token Automático (Status 401) no contexto de Consumo de APIs REST com Axios e Interceptors.

Requisitos de Execução:

1. Interceptar erro 401, renovar o token e reexecutar a requisição original de forma transparente.

Resultado Esperado

Renovação de token transparente executada sem deslogar o usuário.

📤 Instruções de Entrega (Microsoft Teams)

1. Salve o arquivo como: Atividade_15_3_SeuNome
2. Envie na tarefa: Atividade Cap 15 - Consumo de APIs REST com Axios e Interceptors

🔑 Gabarito de Código & Solução Comentada

// api/refreshTokenInterceptor.ts
api.interceptors.response.use(
  (res) => res,
  async (error) => {
    if (error.response?.status === 401 && !error.config._retry) {
      error.config._retry = true;
      // Dispara renovação de token
      return api(error.config);
    }
    return Promise.reject(error);
  }
);

---

🏆 Nível 4: Desafio Corporativo

Problema 15.4 — Cliente HTTP com ofetch no Ecossistema Nuxt / Vue

Contexto: Cliente HTTP com ofetch no Ecossistema Nuxt / Vue no contexto de Consumo de APIs REST com Axios e Interceptors.

Requisitos de Execução:

1. Utilizar ofetch.create({ retry: 3, retryDelay: 500 }) com tipagem de resposta automática.

Resultado Esperado

Cliente HTTP leve com suporte a SSR e auto-retry.

📤 Instruções de Entrega (Microsoft Teams)

1. Salve o arquivo como: Atividade_15_4_SeuNome
2. Envie na tarefa: Atividade Cap 15 - Consumo de APIs REST com Axios e Interceptors

🔑 Gabarito de Código & Solução Comentada

// api/ofetchClient.ts
import { ofetch } from 'ofetch';

export const apiClient = ofetch.create({
  baseURL: 'https://api.empresa.com',
  retry: 2,
});