Angular2 http.get (), map (), subscribe () y patrón observable – comprensión básica

Ahora, tengo una página inicial donde tengo tres enlaces. Una vez que haga clic en el último enlace de ‘amigos’, se iniciará el componente de amigos apropiado. Allí, quiero buscar / obtener una lista de mis amigos introducidos en el archivo friends.json. Hasta ahora todo funciona bien. Pero todavía soy un novato para el servicio HTTP de angular2 usando el concepto de observables, mapas y suscripciones de RxJs. Intenté entenderlo y leer algunos artículos, pero hasta que entre en práctica, no entenderé esos conceptos correctamente.

Aquí ya hice plnkr, que funciona, excepto el trabajo relacionado con HTTP.

Plnkr

myfriends.ts

import {Component,View,CORE_DIRECTIVES} from 'angular2/core'; import {Http, Response,HTTP_PROVIDERS} from 'angular2/http'; import 'rxjs/Rx'; @Component({ template: ` 

My Friends

  • {{frnd.name}} is {{frnd.age}} years old.
`, directive:[CORE_DIRECTIVES] }) export class FriendsList{ result:Array; constructor(http: Http) { console.log("Friends are being called"); // below code is new for me. So please show me correct way how to do it and please explain about .map and .subscribe functions and observable pattern. this.result = http.get('friends.json') .map(response => response.json()) .subscribe(result => this.result =result.json()); //Note : I want to fetch data into result object and display it through ngFor. } }

Por favor guía y explica apropiadamente. Sé que será muy beneficioso para muchos desarrolladores nuevos.

Aquí es donde te equivocaste:

 this.result = http.get('friends.json') .map(response => response.json()) .subscribe(result => this.result =result.json()); 

debería ser:

 http.get('friends.json') .map(response => response.json()) .subscribe(result => this.result =result); 

o

 http.get('friends.json') .subscribe(result => this.result =result.json()); 

Has cometido dos errores:

1- Usted asignó el observable mismo a this.result . this.result . Cuando realmente deseaba asignar la lista de amigos a this.result . La forma correcta de hacerlo es:

  • te suscribes a lo observable .subscribe es la función que realmente ejecuta lo observable. Toma tres parámetros de callback de la siguiente manera:

    .subscribe(success, failure, complete);

por ejemplo:

 .subscribe( function(response) { console.log("Success Response" + response)}, function(error) { console.log("Error happened" + error)}, function() { console.log("the subscription is completed")} ); 

Por lo general, tomas los resultados de la callback de éxito y lo asignas a tu variable. la callback de error es auto explicativa. la callback completa se usa para determinar que ha recibido los últimos resultados sin ningún error. En su plunker, la callback completa siempre se invocará después del retorno de llamada correcto o de error.

2- El segundo error, llamó a .json() en .map(res => res.json()) , luego lo llamó de nuevo en la callback correcta de lo observable. .map() es un transformador que transformará el resultado en lo que devuelva (en su caso .json() ) antes de pasarlo a la callback exitosa, debe .json() una vez en cualquiera de ellos.

Conceptos

Los observables abordan en corto el procesamiento asincrónico y los eventos. Comparando con las promesas esto podría describirse como observables = promesas + eventos.

Lo bueno de los observables es que son flojos, se pueden cancelar y se pueden aplicar algunos operadores (como el map , …). Esto permite manejar cosas asincrónicas de una manera muy flexible.

Una gran muestra que describe el mejor poder de los observables es la forma de conectar una entrada de filtro a una lista filtrada correspondiente. Cuando el usuario ingresa caracteres, la lista se actualiza. Los Observables manejan las solicitudes AJAX correspondientes y cancelan solicitudes previas en curso si se activa otra por el nuevo valor en la entrada. Aquí está el código correspondiente:

 this.textValue.valueChanges .debounceTime(500) .switchMap(data => this.httpService.getListValues(data)) .subscribe(data => console.log('new list values', data)); 

( textValue es el control asociado a la entrada del filtro).

Aquí hay una descripción más amplia de dicho caso de uso: ¿Cómo observar los cambios de forma en Angular 2? .

Hay dos grandes presentaciones en AngularConnect 2015 y EggHead:

Christoph Burgdorf también escribió algunas excelentes publicaciones en el blog sobre el tema:

En acción

De hecho, con respecto a su código, mezcló dos enfoques 😉 Aquí están:

  • Administra el observable por ti mismo . En este caso, usted es responsable de llamar al método de subscribe en el observable y asignar el resultado a un atributo del componente. Luego puede usar este atributo en la vista para iterar sobre la colección:

     @Component({ template: ` 

    My Friends

    • {{frnd.name}} is {{frnd.age}} years old.
    `, directive:[CORE_DIRECTIVES] }) export class FriendsList implement OnInit, OnDestroy { result:Array; constructor(http: Http) { } ngOnInit() { this.friendsObservable = http.get('friends.json') .map(response => response.json()) .subscribe(result => this.result = result); } ngOnDestroy() { this.friendsObservable.dispose(); } }

    Las devoluciones de map métodos get y map son observables, no el resultado (de la misma manera que con las promesas).

  • Vamos a administrar lo observable por la plantilla angular . También puede aprovechar el async para administrar implícitamente lo observable. En este caso, no es necesario llamar explícitamente el método de subscribe .

     @Component({ template: ` 

    My Friends

    • {{frnd.name}} is {{frnd.age}} years old.
    `, directive:[CORE_DIRECTIVES] }) export class FriendsList implement OnInit { result:Array; constructor(http: Http) { } ngOnInit() { this.result = http.get('friends.json') .map(response => response.json()); } }

Puedes notar que los observables son flojos. Por lo tanto, solo se llamará a la solicitud HTTP correspondiente una vez que un oyente esté conectado utilizando el método de subscribe .

También puede observar que el método del map se usa para extraer el contenido JSON de la respuesta y usarlo en el procesamiento observable.

Espero que esto te ayude, Thierry

 import { HttpClientModule } from '@angular/common/http'; 

La API de HttpClient se introdujo en la versión 4.3.0. Es una evolución de la API HTTP existente y tiene su propio paquete @ angular / common / http. Uno de los cambios más notables es que ahora el objeto de respuesta es un JSON de forma predeterminada, por lo que ya no es necesario analizarlo con el método del mapa. De inmediato, podemos usarlo a continuación.

 http.get('friends.json').subscribe(result => this.result =result);