Angular - Ejemplos de solicitudes HTTP POST

A continuación se muestra un conjunto rápido de ejemplos para mostrar cómo enviar solicitudes HTTP POST desde Angular a una API de back-end.

Otros ejemplos de HTTP con Angular: GET, PUT, DELETE

Solicitud POST simple con cuerpo JSON y tipo de respuesta <any>

Esto envía una solicitud HTTP POST a la API Reqres, que es una API REST en línea falsa que incluye una ruta /api/posts que responde a las solicitudes POST con el contenido del cuerpo de la publicación y una propiedad de identificación. La identificación de la respuesta se asigna a la propiedad local postId en la función de devolución de llamada de suscripción.

El tipo de respuesta se establece en <any> para que maneje cualquier propiedad devuelta en la respuesta.

ngOnInit() {
    this.http.post<any>('https://reqres.in/api/posts', { title: 'Angular POST Request Example' }).subscribe(data => {
        this.postId = data.id;
    })
}

Ejemplo de componente Angular en https://stackblitz.com/edit/angular-http-post-examples?file=app/components/post-request.component.ts

Solicitud POST con respuesta fuertemente tipada

Esto envía la misma solicitud que la anterior, pero establece el tipo de respuesta en una interfaz personalizada de Article que define las propiedades de respuesta esperadas.

ngOnInit() {          
    this.http.post<Article>('https://reqres.in/api/posts', { title: 'Angular POST Request Example' }).subscribe(data => {
        this.postId = data.id;
    })
}

...

interface Article {
    id: number;
    title: string;
}

Ejemplo de componente Angular en https://stackblitz.com/edit/angular-http-post-examples?file=app/components/post-request-typed.component.ts

Solicitud POST con manejo de errores

Esto envía una solicitud a una URL no válida en la API, luego asigna el error a la propiedad del componente errorMessage y registra el error en la consola.

El objeto pasado al método de solicitud subscribe() contiene dos funciones de devolución de llamada, se llama a la función next() si la solicitud es exitosa y error() se llama a la función si la solicitud falla.

ngOnInit() {
    this.http.post<any>('https://reqres.in/invalid-url', { title: 'Angular POST Request Example' }).subscribe({
        next: data => {
            this.postId = data.id;
        },
        error: error => {
            this.errorMessage = error.message;
            console.error('There was an error!', error);
        }
    })
}

Ejemplo de componente Angular en https://stackblitz.com/edit/angular-http-post-examples?file=app/components/post-request-error-handling.component.ts

Solicitud POST con encabezados establecidos

Esto envía la misma solicitud nuevamente con un par de encabezados establecidos, el encabezado HTTP Authorization y un encabezado personalizado My-Custom-Header.

Los encabezados a continuación se crean como un objeto JavaScript simple, también se pueden crear con la clase HttpHeaders, p. const headers = new HttpHeaders({ 'Authorization': 'Bearer my-token', 'My-Custom-Header': 'foobar' })

Para establecer o actualizar encabezados en un objeto HttpHeaders existente, llame al método set(), p. const headers = new HttpHeaders().set('Authorization', 'Bearer my-token')

ngOnInit() {
    const headers = { 'Authorization': 'Bearer my-token', 'My-Custom-Header': 'foobar' };
    const body = { title: 'Angular POST Request Example' };
    this.http.post<any>('https://reqres.in/api/posts', body, { headers }).subscribe(data => {
        this.postId = data.id;
    });
}

Ejemplo de componente Angular en https://stackblitz.com/edit/angular-http-post-examples?file=app/components/post-request-headers.component.ts

Requisitos previos para realizar solicitudes HTTP desde Angular

Antes de realizar solicitudes HTTP desde su aplicación Angular, debe hacer un par de cosas.

1. Agregue HttpClientModule a la matriz imports de su AppModule como se muestra a continuación en las líneas 3 y 10.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

2. Importe el HttpClient a su componente y agréguelo a los parámetros constructor() como se muestra a continuación en las líneas 2 y 8.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent implements OnInit {
    postId;

    constructor(private http: HttpClient) { }

    ngOnInit() {      
        // Simple POST request with a JSON body and response type <any>
        this.http.post<any>('https://reqres.in/api/posts', { title: 'Angular POST Request Example' }).subscribe(data => {
            this.postId = data.id;
        })
    }
}

Historial de actualizaciones:

• 22 de abril de 2021: se reemplazó la API JSONPlaceholder por la API Reqres porque JSONPlaceholder dejó de permitir solicitudes CORS
• 21 de noviembre de 2019: se crearon ejemplos de solicitudes POST de HTTP angular