Jornada Frontend

O que é e como usar HTTP no Angular?

O module de HttpClient nos permite buscar dados de uma fonte externa, como em um database. Ele requer que usemos o Subscribe usando o Observable para ter o retorno.

Como usar o HTTP

Vamos começar importando o módulo do HttpClientModule que fica no “@angular/common/http” e não podemos esquecer de importar no array de App Module.

O próximo passo é criar um service onde vamos utilizar o Get do HTTP.

Vamos usar o CLI para gerar o service com o nome de “pessoa”.

Quer saber mais sobre o Angular? Acompanhe o Blog e o meu curso => Aqui

Para usar o HTTP em algum novo serviço precisamos declarar ele dentro do construtor e fazer o import.

Agora estamos com tudo pronto para utilizar o método “get()”, como não temos um servidor web para buscar, vamos utilizar arquivos locais para uma demonstração.

Dentro do projeto vamos criar uma nova pasta chamada “data” e o caminho vai ser o seguinte “src > app > assets > data” e dentro dele vamos criar um arquivo chamado “pessoa.json”.

Agora ao abrir o arquivo “pessoa.json” vamos colocar esses dados:

Vamos utilizar o método “get()” para trazer os dados “externos”, esse método pega uma URL de uma fonte externa como argumento, mas como não estamos utilizando assim, vamos simplificar as coisas.

Agora precisamos transformar o tipo de “pessoa” que pegamos com o “get()” e transformar em algo que representa um array.

Para isso vamos criar um tipo customizado de “pessoa” e vamos criar esse novo arquivo “pessoa.ts”.

Dentro desse novo arquivo vamos criar uma interface chamada “IPessoa”.

O próximo passo é dizer para o “getPessoa()” retornar um tipo “IPessoa”.

Precisamos Subscribe o observable do componente para podermos usar. Porém o nosso caso é mais simples, vamos usar o main “app” para demonstração. Arquivo “app.component.ts”:

Agora sim tudo certo para sobrescrever no Observable que retorna do “getPessoa()” e guardar os dados retornados em um array chamado “pessoa”.

Agora que temos os dados, vamos mostrar em tela.

E vai ser mostrado na tela os nomes que colocamos em nosso json.

Tenha uma carreira
Front-end de Sucesso!

Ebook - JORNADA FRONT-END

Fruto de mais de 7 anos estudando e trabalhando com Front-end, a "Jornada Front-end - O Guia Definitivo" é um manual completo para todos que querem subir em suas carreiras do zero ou subir do seu nível atual.

Ebook enviado com sucesso! Verifique sua caixa de e-mail.

Share This