Header Ads Widget

Ticker

6/recent/ticker-posts

Ionic 5 HTTP POST con Angular por ejemplo

 En este tutorial de Ionic 5 / Angular, aprenderemos cómo enviar una solicitud de publicación HTTP de ejemplo a un servidor (o publicar datos en un servidor). Por lo general, el usuario envía los datos POST mediante un formulario. En este ejemplo, enviaremos un objeto JSON simple. Puede ver cómo publicar datos de formularios de varias partes en este tutorial .

Nota : Para obtener un tutorial completo y detallado, consulte:

  • Tutorial de autenticación Ionic 5 JWT: uso de Angular HttpClient con Node & Express.js Server
  • Tutorial de Ionic 5: Creación y creación de temas para una interfaz de usuario de inicio de sesión y registro con formularios angulares

En el tutorial anterior , vimos qué es una API REST y RxJS. También configuramos nuestra aplicación Ionic 5 / Angular para usar HttpClienty crear (simular) un servidor REST para probar. Ahora veamos cómo enviar una solicitud POST a nuestro servidor.

Nota : Este tutorial se creó originalmente para Ionic 3. Ionic 5 ahora es independiente del marco, pero proporciona soporte para Angular a través del ionic/angularpaquete. Ionic 5 / Angular se considera la próxima versión de Ionic 3.

Agregar un botón Ionic 5 para enviar solicitudes de publicación

Comience abriendo el src\app\home\home.page.htmlarchivo y actualícelo agregando un botón que se usará para llamar al método para enviar la solicitud de publicación:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic 5/Angular POST Request Example
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p>
      Sending a POST Request Example with Ionic 5
  </p>
   <button ion-button (click)="sendPostRequest()">Post Data</button>
</ion-content>

Envío de solicitudes de publicación con Ionic 5 HttpClient

A continuación, abra el src\app\home\home.page.tsarchivo y agregue los siguientes cambios:

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

  constructor(public httpClient: HttpClient) {
  }
  ngOnInit(){}

  sendPostRequest() {
    var headers = new Headers();
    headers.append("Accept", 'application/json');
    headers.append('Content-Type', 'application/json' );
    const requestOptions = new RequestOptions({ headers: headers });

    let postData = {
            "name": "Customer004",
            "email": "customer004@email.com",
            "tel": "0000252525"
    }

    this.http.post("http://127.0.0.1:3000/customers", postData, requestOptions)
      .subscribe(data => {
        console.log(data['_body']);
       }, error => {
        console.log(error);
      });
  }
}

Comenzamos importando los HttpClientHeadersRequestOptionsclases. Después de eso, inyectamos el HttpClientservicio en el constructor del componente como httpclient.

A continuación, definimos el sendPostRequest()método al que se llamará cuando se haga clic en el botón. Estamos llamando al post()método desde la instancia inyectada del servicio HttpClient . El primer parámetro es el punto final de la API y el segundo parámetro es el objeto de datos del cliente . También nos suscribimos al observable devuelto por el post()método que utiliza el .subscribe()método. Si la operación tiene éxito, mostramos el _cuerpo de datos recibido por la función de éxito. Si hay un error, registramos el error en la consola.

Conclusión

En este tutorial rápido, hemos visto el uso del servicio HttpClient para enviar datos HTTP POST en aplicaciones Ionic 5 / Angular.

Publicar un comentario

0 Comentarios