Angular2 http.get(),map(), abonnez-vous() et observables modèle de base de la compréhension

Concepts

Observables à court aborde le traitement asynchrone et les événements. En comparant avec les promesses, on pourrait décrire cela comme observables = promesses + événements.

ce qui est génial avec les observables est qu'ils sont paresseux, ils peuvent être annulés et vous pouvez appliquer certains opérateurs en eux (comme map ,...). Cela permet de gérer les choses asynchrones d'une manière très flexible.

A grand échantillon décrivant le meilleur la puissance des observables est la façon de connecter une entrée de filtre à une liste filtrée correspondante. Lorsque l'utilisateur saisit des caractères, la liste est actualisée. Les Observables traitent les requêtes AJAX correspondantes et annulent les précédentes requêtes en cours Si une autre est déclenchée par une nouvelle valeur dans l'entrée. Voici le code correspondant:

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

( textValue est la commande associée à l'entrée du filtre).

Voici une description plus large de ce cas d'utilisation: comment surveiller les changements de forme dans L'angle 2? .

il y a deux grandes présentations à AngularConnect 2015 et EggHead:

• Observables vs promesses - https://egghead.io/lessons/rxjs-rxjs-observables-vs-promises
• Créer-un-observable - https://egghead.io/lessons/rxjs-creating-an-observable
• RxJS en profondeur https://www.youtube.com/watch?v=KOOT7BArVHQ
• flux de données angulaire 2 - https://www.youtube.com/watch?v=bVI5gGTEQ_U

Christoph Burgdorf a également écrit quelques grands billets de blog sur le sujet:

• http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html
• http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

en action

en fait concernant votre code, vous avez mélangé deux approches ; -) voici elles:

• gérez l'observable par votre propre . Dans ce cas, vous êtes responsable d'appeler la méthode subscribe sur l'observable et d'assigner le résultat dans un attribut du composant. Vous pouvez ensuite utiliser cet attribut dans la vue pour parcourir la collection:

  @Component({
    template: `
      <h1>My Friends</h1>
      <ul>
        <li *ngFor="#frnd of result">
          {{frnd.name}} is {{frnd.age}} years old.
        </li>
      </ul>
    `,
    directive:[CORE_DIRECTIVES]
  })
  export class FriendsList implement OnInit, OnDestroy {
    result:Array<Object>; 
  
    constructor(http: Http) {
    }
  
    ngOnInit() {
      this.friendsObservable = http.get('friends.json')
                    .map(response => response.json())
                    .subscribe(result => this.result = result);
     }
  
     ngOnDestroy() {
       this.friendsObservable.dispose();
     }
  }
  

  retourne des méthodes get et map ne sont pas le résultat observable (de la même manière qu'avec des promesses).

• laisser gérer l'observable par le gabarit angulaire . Vous pouvez également utiliser le tuyau async pour gérer implicitement l'observable. Dans ce cas, il n'est pas nécessaire d'appeler explicitement la subscribe la méthode.

  @Component({
    template: `
      <h1>My Friends</h1>
      <ul>
        <li *ngFor="#frnd of (result | async)">
          {{frnd.name}} is {{frnd.age}} years old.
        </li>
      </ul>
    `,
    directive:[CORE_DIRECTIVES]
  })
  export class FriendsList implement OnInit {
    result:Array<Object>; 
  
    constructor(http: Http) {
    }
  
    ngOnInit() {
      this.result = http.get('friends.json')
                    .map(response => response.json());
     }
  }
  

vous pouvez remarquer que les observables sont paresseux. Ainsi, la requête HTTP correspondante ne sera appelée qu'une fois qu'un auditeur y est attaché en utilisant la méthode subscribe .

vous pouvez également noter que la méthode map est utilisée pour extraire le contenu JSON de la réponse et l'utiliser ensuite dans le traitement observable.

J'espère que cela vous aidera, Thierry

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

L'API HttpClient a été introduite dans la version 4.3.0. Il s'agit d'une évolution de L'API HTTP existante et possède son propre paquet @angular/common/http. Un des changements les plus notables est que maintenant l'objet response est un JSON par défaut, il n'y a donc plus besoin de l'analyser avec la méthode map .Tout de suite nous pouvons utiliser comme ci-dessous

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