-1

Olá, tenho uma aplicação que preciso receber um JSON e popular meus campos de input, após realizar um Post de cpf/cnpj. No caso em questão é a API da SEPRO, onde faço a consulta de cpf/cnpj e ele me trás os dados do cliente, estou utilizando o POSTMAN para consumir esses dados.

Porem estou tendo dificuldade para passar o método Post na minha Service.ts, fiz de diversas formas mas não funciona, consigo realizar apenas o método Get com sucesso, se alguém puder me ajudar ficaria agradecido!!! :)

dashboard-home.servce.ts

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

@Injectable({
  providedIn: 'root'
})
export class DeshboardHomeService {

  constructor(private httpClient: HttpClient) {}

  sepro(cpf:any){
    return this.httpClient.post(`http://{{gatway_dns}}/pessoas/v1/pessoas_fisicas/10101010010/sepro`)
  }
}
4
  • O que seria isso {{gatway_dns}}?
    – LeAndrade
    30/08/2022 às 11:32
  • Eles disponibilizam método post na api deles? na pesquisa que fiz só achei os métodos GET. segue os links que achei abaixo Consulta CNPJ DF V2 (Trial), Consulta CPF
    – Eustáquio
    30/08/2022 às 12:32
  • Então no Postman, para consumir os dados do cliente tenho que fazer um Post com o CPF/CNPJ, ai ele me retorna o JSON com nome completo, empresa etc... 30/08/2022 às 13:52
  • Se você puder compartilhar isso que você falou. se entendi direito no postman esta dando certo. Confira também de onde a variável gatway_dns vem.
    – Eustáquio
    1/09/2022 às 12:14

1 Resposta 1

-1

Vou dar um exemplo básico que utilizei por bastante tempo para aprender Angular,

ApiService.ts - Service (Serviço) Esse é o nosso serviço, ele irá ficar com as requisições http para a rota car da api que temos que consumir.

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Car } from './car';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
 
@Injectable({providedIn:'root'})
export class ApiService {
 
  baseURL: string = "http://localhost:8080/";
 
  constructor(private http: HttpClient) {
  }
 
  getCars(): Observable<Car[]> {
    console.log('getCar '+this.baseURL + 'car')
    return this.http.get<Car[]>(this.baseURL + 'car')
  }
 
  addCar(car:Car): Observable<any> {
    const headers = { 'content-type': 'application/json'}  
    const body=JSON.stringify(car);
    console.log(body)
    return this.http.post(this.baseURL + 'car', body,{'headers':headers})
  }
 
}

AppComponent - Component (Componente) Esse é o nosso componente, ele irá fazer uma injeção de dependência para o nosso ApiService e utiliza-lo para as chamar requisições http.

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';
import { Car } from './car';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 
  title = 'AppComponent';
  cars:Car[];
  car = new Car();
  
  constructor(private apiService:ApiService) {}
 
  ngOnInit() {
    this.getAllCars()
  }

  // Get sendo utilizado
  getAllCars() {
    this.apiService.getCars()
      .subscribe(data => {
        console.log(data);
        this.cars=data;
      })      
 
  }
 
  // Post sendo utilizado
  addCar() {
    this.apiService.addCar(this.car)
      .subscribe(data => {
        console.log(data);
        this.getAllCars(); // Atualiza todos os carros, pois adicionou novo
      })      
  }
 
}
 

Agora é apenas você chamar essas funções conforme sua necessidade, nesse caso, sempre que esse componente for iniciado eu vou chamar a função getAllCars() para obter todos os carros, assim como você pode chamar a função addCar() quando o usuário clicar em um botão.

O Angular utiliza em suas requisições HTTP o Observable, essa é uma das formas que utilizamos para trabalhar com requisições e mais comum, os Observables no Angular, a ideia é que seja feito um .subscribe() para cada requisição http, como return this.http.post.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .