📊 Capítulo 15: Consumo de APIs com Axios & ofetch

Especialização em Frontend com Vue.js

🗺️ O Pipeline de Interceptação HTTP do Axios

sequenceDiagram
    autonumber
    actor V as Composable / Store
    participant INT_REQ as Request Interceptor (Injeta Bearer Token JWT)
    participant API as Servidor Backend REST
    participant INT_RES as Response Interceptor (Trata 401 / Refresh Token)

    V->>INT_REQ: api.get('/pedidos')
    INT_REQ->>API: HTTP GET com Authorization Header
    alt Sucesso HTTP 200
        API-->>INT_RES: Retorna JSON
        INT_RES-->>V: Retorna dados limpos
    else Falha HTTP 401 Não Autorizado
        API-->>INT_RES: Erro 401
        INT_RES->>API: Chama /auth/refresh
        API-->>INT_RES: Novo Token Emitido!
        INT_RES->>API: Retenta a requisição original com novo token!
        API-->>V: Resposta final com sucesso
    end

🎯 Slide 1: Instância Centralizada com Axios

import axios from 'axios';

export const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 10000,
});

🎯 Slide 2: Cancelamento de Requisições com AbortController

let controller: AbortController | null = null;

async function buscarComCancelamento(termo: string) {
  if (controller) controller.abort(); // Cancela busca pendente anterior!
  controller = new AbortController();

  return api.get(`/busca?q=${termo}`, { signal: controller.signal });
}

🎯 Slide 3: O Moderno ofetch (Ecossistema Nuxt)

• Alternativa moderna ao Axios baseada na Fetch API, com auto-parsing de JSON, suporte nativo a SSR e tipagem estrita de retorno!