Publicada:
Última actualización:

Angular - Ejemplos de solicitudes HTTP GET

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

Otros ejemplos de HTTP disponibles:


Solicitud GET simple con tipo de respuesta <any>

Esto envía una solicitud HTTP GET a la API de npm para obtener una lista de paquetes que pertenecen al ámbito @angular, luego asigna el total devuelto en la respuesta a la propiedad local totalAngularPackages. El tipo de respuesta se establece en <any> para que maneje cualquier propiedad devuelta en la respuesta.

ngOnInit() {
    this.http.get<any>('https://api.npms.io/v2/search?q=scope:angular').subscribe(data => {
        this.totalAngularPackages = data.total;
    })        
}

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


Solicitud GET con respuesta fuertemente tipada

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

ngOnInit() {          
    this.http.get<SearchResults>('https://api.npms.io/v2/search?q=scope:angular').subscribe(data => {
        this.totalAngularPackages = data.total;
    })
}

...

interface SearchResults {
    total: number;
    results: Array<object>;
}

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


Solicitud GET con manejo de errores

Esto envía una solicitud a una URL no válida en la API de npm y 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.get<any>('https://api.npms.io/v2/invalid-url').subscribe({
        next: data => {
            this.totalAngularPackages = data.total;
        },
        error: error => {
            this.errorMessage = error.message;
            console.error('There was an error!', error);
        }
    })
}

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


Solicitud GET con encabezados configurados

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' }
    this.http.get<any>('https://api.npms.io/v2/search?q=scope:angular', { headers }).subscribe(data => {
        this.totalAngularPackages = data.total;
    })
}

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


Requisitos previos para realizar una solicitud 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 {
    totalAngularPackages;

    constructor(private http: HttpClient) { }

    ngOnInit() {      
        // Simple GET request with response type <any>
        this.http.get<any>('https://api.npms.io/v2/search?q=scope:angular').subscribe(data => {
            this.totalAngularPackages = data.total;
        })
    }
}

 


Suscríbete o Sígueme para actualizaciones

Suscríbete a mi canal de YouTube o sígueme en Twitter, Facebook o GitHub para recibir notificaciones cuando publique contenido nuevo.

Aparte de la codificación...

Actualmente estoy intentando viajar por Australia en motocicleta con mi esposa Tina en un par de Royal Enfield Himalayan. Puedes seguir nuestras aventuras en YouTube, Instagram y Facebook.


¿Necesita Ayuda Angular?

Buscar fiverr para encontrar ayuda rápidamente de desarrolladores Angular experimentados.