El HttpClient en @angular/common/http ofrece una API HTTP cliente simplificada para aplicaciones angulares que se basa en la interfaz XMLHttpRequest expuesta por los navegadores.
Observable proporciona un mejor rendimiento que Promise. Si no estás familiarizado con lo que es observable, puedes leer más sobre lo que es observable aquí.

Para utilizar el HttpClient en su proyecto, necesita importar el HttpClient en app.module.ts . Después de la importación, tu archivo app.module.ts tendrá el siguiente aspecto:
12345678910111213importar{Módulo de Navegador}de"@angular/plataforma-núcleo";importar{HttpMódulo de Cliente}de"@angular/común/http";importar{NgMódulo}de"@angular/núcleo";importar{Componente de Aplicación}de". /app.component";@NgModule({ declaraciones:[AppComponent], importa:[BrowserModule,HttpClientModule], proveedores:[], bootstrap:[AppComponent]})exportclassAppModule{}
tipografía
Entonces necesitamos hacer una clase de servicio donde crearemos los métodos para hacer la petición HTTP:
1ng g s httpCrudDemo --skipTests=true
Shell
Como pueden ver, he usado –skipTests=true.because Angular hace dos archivos para el servicio. Uno es para la lógica del negocio y otro para las pruebas de la unidad. No voy a hacer ninguna prueba unitaria por ahora, así que me saltaré el archivo de pruebas.
No vamos a construir APIs de backend para esta guía; voy a usar JSONPlaceholder, que es una API gratuita que puede probar nuestras aplicaciones de frontend.
Antes de escribir los métodos para hacer las peticiones HTTP, necesitamos hacer la variable del httpClient en la clase de servicio.
1constructor(httpCliente privado:HttpCliente){}
tipografía
Esto instanciará el httpClient para que podamos usarlo para hacer las peticiones HTTP.
La mejor práctica es dividir el URL completo en dos partes:
Así que finalmente nuestro servicio se verá así:
123456789101112importación{inyectable}de$0027@angular/núcleo$0027;importación{HttpCliente}de$0027@angular/común/http$0027;@inyectable({ providedIn:$0027root$0027})exportclassHttpCrudDemoService{ url:string;constructor(httpCliente:HttpCliente privado){esto.;}
tipografía
En la siguiente sección, voy a escribir los métodos de servicio para crear, leer, actualizar y eliminar el puesto.
Obtener todos los mensajes
123456publicgetPosts(){let endPoints=""this.httpClient.get(this.url+endPoints).subscribe(data={[{console.log(data);});}
tipografía
El método GET de la petición HTTP obtiene los datos del servicio y da un conjunto de objetos. Sólo toma un parámetro, es decir, la URL del servicio backend. El método GET proveerá los datos en formato JSON que necesitamos convertir en objeto de escritura. Pero gracias a HTTPClient convierte los datos de JSON a una forma observable para nosotros. Para extraer los datos del observable, necesitamos usar el método subscribe de rxjs, que nos dará los datos en un objeto typescript/javascript que podemos usar en cualquier otra función.
Obtener el correo por identificación
1234567publicgetPostById(){let id_number=1;let endPoints ="/posts/"+ id;this.httpClient.get(this.url+ endPoints).subscribe(data= >{console.log(data);});}
tipografía
En la función anterior, estoy buscando los datos para una identificación específica. En este caso, sólo se devuelve un objeto en lugar de un conjunto de objetos.
Añadir nuevo mensaje
123456publicaddPost(postData:Objeto){let endPoints ="/posts "this.httpClient.post(this.url+ endPoints, postData).subscribe(data={[{console.log(data);});}
tipografía
El método POST se utiliza para enviar los datos al servidor. Toma dos parámetros, la URL del servicio y el cuerpo de la solicitud. En muchos casos, los servidores envían el ID del objeto en respuesta para confirmar que sus datos han sido procesados por el servidor y que el objeto ha sido creado con éxito.
Actualizar el Post
123456publicupdatePost(postData:Object){let endPoints ="/posts/1 "this.httpClient.put(this.url+ endPoints, postData).subscribe(data={{[};{console.log(data);});}
tipografía
El método PUT se utiliza para actualizar un objeto que ya está guardado en la base de datos. También requiere dos parámetros, primero el URL y segundo el cuerpo de la petición. Para actualizar el objeto, necesitamos pasar el ID del objeto en la URL como un parámetro de ruta.
Borrar el correo
123456publicdeletePost(){let endPoints ="/posts/1 "this.httpClient.delete(this.url+ endPoints).subscribe(data={{{console.log(data);});}
tipografía
El método DELETE sólo requiere la URL que tiene el ID del objeto. Comprueba el ID y borra los datos de la base de datos. Pero en una aplicación del mundo real, el software borra los datos, lo que significa que los datos no se eliminan del servidor de forma permanente, sino que se desactivan, principalmente para fines de información.
Para hacer la solicitud HTTP, siempre debe buscar los encabezados porque en muchos casos el servidor sólo aceptará la solicitud de un cliente autorizado. En tales casos, se debe pasar un token de autorización o acceso en la cabecera de autorización.