Resuminho rxJs e Requisições (com base na aula do Ralf sobre requisições)

Oi, pessoal. Geralmente eu gosto de fazer pequenos resumos sobre o passo a passo que está sendo feito em um código, quando estou aprendendo algo novo.

Me baseando na aula de ontem (requisições a API com rxJS), fiz um resuminho do passo a passo que podemos fazer para consumir API’s. Caso tenham pessoas que são muito visuais também, espero que ajude!

1º passo:

Após criarmos o nosso projeto, criamos uma pasta de modelos*(models)*. Nós usamos essa pasta separada para podermos manipular com facilidade os atributos que temos dentro de um json. Então, todos os atributos que tenho em uma API estarão presentes na minha pasta de modelos.

Todo modelo criado é uma classe ou interface. Podemos criar qualquer um dos dois, mas nas classes podemos utilizar métodos, muito usados em projetos maiores.

Exemplo: Criar pasta de modelos e criar arquivo “Postagem.ts”.

export class Postagem{}-> dentro das chaves nós colocamos os nossos atributos para tipar nossa API.

2º passo:

Criar um componente e, de preferência, colocar o mesmo nome que botamos para nossa classe criada na pasta de modelos.

Após criar o componente, devemos criar um service. No angular, é recomendado criar services para os métodos que faz chamadas http em nossas requisições.

Comando para criar o service: ng g service services.

Executar projeto:ng s

3º passo:

Dentro da pasta de service:

Vamos criar um construtor para injetar um objeto HttpClient, e este será private. O httpClient será importado logo acima. (prestar atenção se foi importado).

Vamos criar uma private URL com a url da nossa API. Ex.: private urlPostagem:string = 'https://jsonplaceholder.typicode.com/posts';

*Antes de começarmos a montar os primeiros passos da requisição, precisamos ir até o app.config.ts fazer um provider para fazermos as requisições. Aqui está a parte em que colocamos o providerHttpClient:

export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes), provideHttpClient(withFetch))]

4º passo:

Agora, irei criar os métodos para retornar postagens (exemplo de aula).

listarPostagens():Observable<Postagem[]>{
return this.http.get<Postagem[]>(this.urlPostagem)
}

-> Nesse método, estou pegando o meu Postagem.ts (o tipo que criei, a classe) e tornando um vetor de postagens, pois é um conjunto de postagens.
A parte de “this.http” é tipo o nosso “fetch”, onde vai falar o que queremos fazer, que, no caso, é retornar uma lista do TIPO Postagem (o que criei no meu modelo). Ele diz: ““http” me traz a lista de postagens que tem na API”.

->O Observable anda junto com o Subscriber. O Observable fará as requisições; de tempos em tempos, ele executa requisições. O Subscriber irá retornar essas requisições, ou seja, recebe esse retorno. O subscriber estará no meu componente.

OBS: É importante verificar se o meu Postagem e o meu Observable foram importados logo acima do código.

5º passo:

Não esquecer de ir até o meu app-component.ts e o meu app.component-html para importar tudo que fizemos no ‘imports’. Importar o PostagemComponent no ts (ver se foi importado logo acima) e produzir ele no app-html .

6º passo:

Eu vou no meu Postagem.component.ts e começar importando o meu PostagemService (o meu serviço que fiz lá no início) no meu construtor. O construtor é o primeiro método executado dentro de uma classe e eu vou usá-lo para termos acesso aos nossos serviços. Ex.:

constructor(private servicoPostagem:PostagemService)
-> O servicoPostagem é um nome que criamos e o PostagemService é o nosso serviço importado aqui no componente.

7º passo:

Ainda no Postagem.component.ts, nós criamos um vetor de Postagens postagens:Postagem[]= [] e importamos lá em cima a nossa classe Postagem.

Agora, nós já podemos criar a nossa função para listar as postagens (método GET).

listarPostagens():void{
this.servicePostagem.listarPostagens()
.subscribe(retorno =>{
this.postagens = retorno;
})
}

Lembrar que o subscriber notificará assim que a resposta vier e for transformada em Json, nos retornando um array de Postagens.

Nessa função acima eu estou referenciando o meu service também para poder listar as postagens.

Posso fazer um console.log/table para poder exibir a lista de postagens e verificar se está tudo certo. Logo em seguida, posso usá-las no meu HTML.

OBS: Depois ou durante tudo isso, fazer o meu ngOnInit para colocar o meu método. Ele faz parte do ciclo de vida do componente, então, toda lógica que quero que seja executada assim que o componente for carregado, coloco no meu onInit.

ngOnInit(){
this.listarPostagens();
}

8º passo:

Nesse caso, ao irmos ao HTML e tentarmos montar uma tabela, utilizaremos o *ngFor e faremos a relação com o vetor de postagens que foi implementado com a requisição feita no meu Postagem.component.ts.

Daqui em diante, é só fazermos as referências necessárias depois do For acontecer.

---

Eu não sei se ficou faltando algo ou se ficou muito confuso. Se sim, podem colaborar, por favor! <3

Fiz um resuminho pra ler juntamente com o código do lado.