# Extra B — Consumo de APIs com fetch e axios

Exemplos e exercícios da página
[Extra B: fetch e axios](https://ensino.diegoinacio.com.br/dev-web-mobile/fetch-axios)
da disciplina Programação Web e Mobile.

Material complementar: não é o projeto de nenhuma aula e não parte de
nenhuma delas. Os exemplos consomem a **API da aula 10**
(`dev-web-mobile-nestjs/aula-10-autenticacao`), sem alterá-la.

## Pré-requisitos

- Node.js 22 ou 24.
- A API da aula 10 no ar em `http://localhost:3000`, com o banco populado
  pelo seed (`npx prisma db seed`). O seed cria as contas
  `admin@biblioteca.com` / `admin123` e `ana@exemplo.com` / `leitor123`.
- Para os exemplos de tempo limite (04 e laboratório 3), o servidor lento
  deste projeto, em outro terminal: `npm run servidor-lento`.

## Como executar

```bash
npm ci                                         # as versões exatas do package-lock.json
npm run check                                  # verifica os tipos de src/
npx tsx src/01-ler-com-fetch-e-axios.ts        # executa um exemplo
```

| Arquivo | O que mostra |
|---|---|
| `src/api.ts` | tipos do contrato (os mesmos de `lib/livros.ts` da aula 13), endereços e contas |
| `src/01-ler-com-fetch-e-axios.ts` | a mesma leitura com os dois clientes: duas etapas × uma |
| `src/02-tres-desfechos.ts` | 200, 404, 400 e API fora do ar: quem realiza e quem rejeita |
| `src/03-escrever-com-token.ts` | login, POST, PATCH e DELETE; `Content-Type` esquecido; 401, 403, 204 |
| `src/04-tempo-limite-cancelamento.ts` | `AbortSignal.timeout`, `timeout` do axios, `abort()` e o contraste com `Promise.race` |
| `src/servidor-lento.ts` | servidor mínimo que demora a responder e registra pedidos abandonados |
| `src/erro-da-api.ts` | `ErroDaApi`, a interface `ClienteDaApi` e a sessão com o token |
| `src/cliente-axios.ts` | cliente sobre axios: instância + dois *interceptors* |
| `src/cliente-fetch.ts` | o mesmo cliente sobre fetch, sem dependência |
| `src/05-cliente-configurado.ts` | o mesmo roteiro contra os dois clientes, com saída igual |
| `src/06-tipagem-da-resposta.ts` | o parâmetro de tipo do axios e o `as` do fetch não conferem nada |
| `contar-requisicoes.cjs` | registra no terminal da API cada requisição recebida (laboratório 5) |
| `next/` | arquivos do experimento opcional com o cliente web da aula 13 (ver a Parte 7 da página) |
| `praticar/` | quatro exercícios com `TODO`; ver `praticar/LEIA-ME.md` |

`next/` fica fora do `npm run check`: os arquivos dependem de um projeto
Next.js e só compilam copiados para uma **cópia** de `aula-13-dados-api`.

## Versões

`axios` está fixado em **1.20.0**, sem `^`, pelo motivo discutido na Parte 8
da página: uma versão publicada por engano ou por ataque não entra no projeto
sem uma decisão sua. Verificado com Node.js 22.22.2, TypeScript 6.0.3, tsx
4.20.5, axios 1.20.0 e, no experimento de `next/`, Next.js 16.3.4.