Angularjs Enviar datos con Http Post

1. Publicar solicitud a la API con el tipo de respuesta <any> en Angular
2. Post Request con respuesta esperada en Angular

Antes de sumergirnos en el punto real de este tema, primero aprendamos qué hace http.post() en Angular. Cuando piensas en Google, los resultados de búsqueda que recibimos cuando buscamos se envían al servidor utilizando el método post, y cuando un usuario inicia una búsqueda en Google, se llama al método get.

Entonces, el http.post() se usa en Angular para almacenar datos en el servidor. El servidor que detendrá estos datos tendrá una URL.

Cuando un codificador se encuentra con $http.post() por primera vez, especialmente alguien con conocimiento de jQuery, el primer instinto es reemplazar $jQuery.post() con $http.post(), pero esto no funcionará porque Angular transmite datos de manera diferente.

Cuando la función $http.post() no se aplica correctamente, se llama a los datos de URL que se enviarán, pero no se envía ningún dato. Avancemos y veamos diferentes formas de aplicar la función HTTP Post correctamente.

Publicar solicitud a la API con el tipo de respuesta <any> en Angular

El primer ejemplo requerirá que solicitemos una URL, que devuelve la identificación asignada a Jason. El tipo de respuesta es <any>, por lo que maneja cualquier propiedad enviada como respuesta.

Tenemos un html muy sencillo de configurar.

<div>
  <h1>Angularjs HTTP POST</h1>
  <div>Post Id: {{ postId }}</div>
</div>

Luego nos movemos a app.component.ts donde importaremos HttpClient, que envía solicitudes HTTP a Angular. Luego usamos el mismo HttpClient como constructor.

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

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

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http
      .post<any>('https://reqres.in/api/users', {
        name: 'Jason',
      })
      .subscribe((data) => {
        this.postId = data.id;
      });
  }
}

Luego, finalmente nos dirigimos a app.module.ts. Aquí importaremos HttpClientModule en Angular.

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 { }

Si todo va como se indica, deberías ver el Post id, con tres números generados.

Post Request con respuesta esperada en Angular

Este método brinda a los usuarios un mejor control sobre la respuesta que obtenemos de la URL porque podemos asignar los datos que queremos obtener. Llamaremos a la función interface Article para esta tarea.

Solo realizamos pequeños cambios en app.component.ts, donde reemplazamos <any> por <Article> y creamos la función Article justo debajo.

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

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

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http
      .post<Article>('https://reqres.in/api/users', {
        name: 'Jason',
      })
      .subscribe((data) => {
        this.postId = data.name;
      });
  }
}
interface Article {
id: number;
name: string;
}

En lugar de que HTTP devuelva el id como respuesta, lo que obtenemos es el nombre asignado al id.