Framework Angular

Angular: Peticiones HTTP con HttpClient

Resumen: mostrar cómo usar el cliente HTTP de Angular para hacer peticiones y consumir API REST usando métodos como GET, POST, PUT y DELETE además de JSON para el intercambio de datos.

En este post vamos a crear un servicio de Angular que a su vez usará el HttpClientModule para hacer peticiones HTTP. Después vamos a consumir ese servicio desde cualquier componente.

Usar módulo HttpClientModule

En app.module.ts importamos HttpClientModule y lo colocamos en imports.

// Importar
import { HttpClientModule } from "@angular/common/http";

@NgModule({
  imports: [BrowserModule, FormsModule, /*Aquí: --> */HttpClientModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: []
})
export class AppModule {}

Después, en el lugar en donde lo vayamos a usar importamos HttpClient de @angular/common/http y lo inyectamos en el constructor como veremos en el servicio.

Creando el servicio

Como buena práctica al consumir servicios web con Angular debemos crear un servicio. No voy a profundizar en ellos porque ya mostré un tutorial sobre Angular services anteriormente.

El nombre de mi servicio es PersonasService y queda como a continuación.

import { Injectable } from "@angular/core";

import { HttpClient } from "@angular/common/http";
import { Persona } from "./persona";

@Injectable({
  providedIn: "root"
})
export class PersonasService {
  rutaApi = "https://ejemplo.com";

  constructor(private http: HttpClient) {}

  obtener() {
    return this.http.get(`${this.rutaApi}/obtenerPersonas.php`);
  }

  registrar(persona: Persona) {
    return this.http.post(`${this.rutaApi}/registrarPersona.php`, persona);
  }

  actualizar(persona: Persona) {
    return this.http.put(`${this.rutaApi}/actualizarPersona.php`, persona);
  }

  eliminar(id: string | number) {
    return this.http.delete(`${this.rutaApi}/eliminarPersona.php?id=${id}`);
  }
}

Por cierto, puedes ver que en algunas funciones recibo argumentos que son de la clase Persona. La clase es la siguiente:

export class Persona {
  constructor(public nombre:string,public edad:number){}
}

¿Por qué usar una clase?

De este modo aprovechamos un poco el tipado fuerte que tiene TypeScript para regresar, por ejemplo, un arreglo de tipo Persona, y así tener certeza de que la lista que regresa el servidor es de tipo Persona.

Lo mismo para las otras clases.

Peticiones con HttpClient

En el servicio estamos haciendo las 4 operaciones básicas pero las explicaré aquí por verbo HTTP. Comenzamos definiendo la URL base, esto no es obligatorio pero lo hago así por si en el futuro cambio la ruta del servidor.

rutaApi = "https://ejemplo.com";

Ahora vemos el método GET:

obtener() {
  return this.http.get(`${this.rutaApi}/obtenerPersonas.php`);
}

Invocamos a get del cliente HTTP a la ruta obtenerPersonas.php, el parámetro que indicamos es la ruta.

Podemos enviar datos con POST. Los mismos serán codificados como JSON (recuerda colocar los campos de la clase como públicos porque si son privados no serán tomados en cuenta).

Queda así:

registrar(persona: Persona) {
  return this.http.post(`${this.rutaApi}/registrarPersona.php`, persona);
}

El segundo argumento ahora son los datos que se envían. Lo mismo pasa con el método put:

actualizar(persona: Persona) {
  return this.http.put(`${this.rutaApi}/actualizarPersona.php`, persona);
}

Finalmente el método DELETE que no lleva cuerpo, pero podemos usar la url:

eliminar(id: string | number) {
  return this.http.delete(`${this.rutaApi}/eliminarPersona.php?id=${id}`);
}

Por cierto, si no conoces esas comillas, son backticks y permiten combinar cadenas de mejor manera.

Usar servicio

Ahora que tenemos el servicio y el cliente HTTP de Angular podemos importar al mismo en un componente. Por ejemplo para obtener las personas:

// Importar servicio y también clase:
import { PersonasService } from "./personas.service";
import {Persona} from "./persona"

export class AppComponent {
  
  // Inyectar servicio en constructor
  constructor(private personasService: PersonasService) {}

  // Función que hace la petición
  probarGet() {
    this.personasService
    .obtener()
    .subscribe((personas: Persona[]) => {
      console.log(personas);
    });
  }
}

Invocamos al servicio y luego a subscribe, que devolverá una “promesa” si lo queremos ver así, para que más tarde traiga un arreglo de tipo Persona.

Al final lo imprimimos:

Conclusión y resumen

  • Debemos importar el módulo HTTP en app.module.ts
  • Para usar el cliente http lo importamos como HttpClient; podemos inyectarlo en un constructor
  • El cliente HTTP de Angular puede ser usado en componentes directamente, pero es altamente recomendado usarlo en un servicio y después consumirlo desde los componentes
  • En los 4 verbos que vimos podemos invocar a subscribe para tener la respuesta.

Las comillas son backticks y la flecha => funciona como las funciones flecha en JavaScript.

Muy pronto traeré la parte 2 con una demostración y conexión a PHP; aunque Angular se puede conectar a cualquier servidor 😉

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

1 semana hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.