🚀 8.2 Consumindo APIs com Modern JavaScript
Com a API do Green Dog Delivery funcionando, precisamos integrá-la ao front-end. Enquanto o legado utilizava bibliotecas gigantescas como AngularJS 1.x ou JQuery, a Engenharia Premium favorece o uso dos padrões nativos do navegador: a Fetch API e o suporte a Promises.
Consumo Assíncrono de Elite
Diga adeus ao “Callback Hell”. O JavaScript moderno utiliza async/await, tornando o código de consumo de API tão legível quanto o código Java síncrono.
Exemplo: Listagem de Itens no Cardápio
Substitua o antigo código AngularJS pelo padrão Universal JavaScript:
async function carregarItens() {
try {
const response = await fetch('/api/itens');
if (!response.ok) throw new Error('Falha na comunicação com a API');
const data = await response.json();
const itens = data._embedded.itens; // Padrão HAL/HATEOAS do Spring
exibirCardapio(itens);
} catch (error) {
console.error('❌ [Green Dog] Erro:', error);
mostrarAlerta('Erro ao carregar cardápio!');
}
}Por que migrar do AngularJS para o Padrão Moderno?
| Característica | AngularJS (Legado) | Fetch + ES6+ (Elite) |
|---|---|---|
| Peso | +150KB de biblioteca | Puro (0KB extra) |
| Dependência | Framework proprietário | Padrão W3C Universal |
| Sintaxe | $http.get(...).success() | await fetch(...) |
| Carregamento | Bloqueante/Lento | Assíncrono e Otimizado |
IMPORTANT
CORS (Cross-Origin Resource Sharing): Ao consumir APIs de domínios diferentes (ex: seu front-end está em porta 3000 e o back-end na 8080), você precisará configurar o
@CrossOriginou umWebMvcConfigurerno Spring Boot para permitir o acesso seguro.
Você agora tem a base completa para criar aplicações Single Page Applications (SPA) integradas ao ecossistema Spring Boot 3.5! No próximo capítulo, veremos como automatizar toda essa exposição de dados.