Como Resolver o Problema de Consumo de API em Angular de Forma Eficiente

Há um tempo atrás, iniciei aqui na DIO, um bootcamp com aulas de Angular, e após concluí-las, resolvi fazer um projeto da clássica pokedéx com uso de Angular, para treino de consumo de API. Afinal, quem no início das aprendizagens em TI nunca fez sua pokedéx com o uso do PokeAPI, não é mesmo?

Pois bem, aparentemente parecia ser algo simples, afinal, uma pokedéx feita em HTML + CSS + JS é algo simples de se fazer, sem muitas complicações, porém ao passar o projeto para Angular, quando me deparei na parte do consumo da API pokeAPI, o pesadelo parra conseguir respostas começou, afinal, o Angular, é um framework “recente”, criado em 2016 pela Google (O Angular de fato, não o AngularJS), e que há várias versões em uso, e cada uma com sua “pequena” mudança, atualmente apresentando a versão 15.

No caso, quando realizei o projeto, utilizava a v14, essa possuindo uma diferença bem importante no uso de uma ferramenta que considero fundamental no consumo de APIs, o subscribe, que acaba sendo o amigo irmão do get do HttpClientModule.

O subscribe do Angular, é uma funcionalidade onde é possível tornar o evento “inscrito” em outro do tipo rest. Ou seja, exemplificando, seria como o subscribe de um canal no Youtube, por exemplo, pelo qual ao se inscrever no canal, você recebe notificações de vídeos que foram adicionados ao canal.

Assim, após criar a função get para “acessar” a url d API e realização sua requisição HTTP, o subscribe permite a variável, seja um objeto, ou uma array, ficar vinculada e ouvindo essa requisição de forma ativa.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

 

@Injectable({
providedIn: 'root'
})

export class PokeApiService { 

private url: string = 'https://pokeapi.co/api/v2/pokemon/'

constructor(private http:HttpClient) { }
 
getPokemon(poke:string) {
  return this.http.get(this.url+poke)
}

}

Assim, utilizando o subscribe, a partir das versões mais atuais sua declaração se tornou de forma diferente, tendo que ser declarada com o uso do Next e o Error

getPokemon(poke:string) {
  this.pokeApi.getPokemon(poke).subscribe({
    next:(response)=> {
      this.pokemons.push(response)
    },
    error(err) {
        console.log(err.message)
    },
  })
}

Esse foi um exemplo rápido, para acesso direto dos dados de um único Pokémon. 

Para quem quiser consultar o código completo da Pokedéx com Angular -> pcanossa/Angular_Pokedex: Criação de pokedéx com utilização de framework Angular e PokeAPI (github.com)