Http.get (), map (), subscribe () i obserwowalny wzorzec w Angular2 - podstawowe zrozumienie

Teraz mam stronę początkową, na której mam trzy linki. Po kliknięciu ostatniego łącza „znajomi” inicjowany jest odpowiedni komponent znajomych. W tym miejscu chcę pobrać / pobrać listę moich znajomych wpisanych do pliku friends.json. Do tej pory wszystko działa dobrze. Ale nadal jestem nowicjuszem w usłudze HTTP angular2, używającej obserwojów, mapy, subskrypcji RxJs. Próbowałem to zrozumieć i przeczytałem kilka artykułów, ale dopóki nie zabiorę się do praktycznej pracy, nie zrozumiem poprawnie tych pojęć.

Tutaj już stworzyłem plnkr, który działa z wyjątkiem pracy związanej z 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: `
    <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{

      result:Array<Object>; 
      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.

       }
  }

Prosimy o właściwe prowadzenie i wyjaśnianie. Wiem, że będzie to bardzo korzystne dla wielu nowych programistów.

Oto, gdzie popełniłeś błąd:

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

powinno być:

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

lub

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

Popełniłeś dwa błędy:

1- Przypisałeś obserwowalne samo this.result. Kiedy faktycznie chciałeś przypisać listę znajomych do this.result. Prawidłowy sposób to:

• subskrybujesz to, co obserwowalne. .subscribejest funkcją, która faktycznie wykonuje obserwowalne. Wymaga trzech następujących parametrów wywołania zwrotnego:

  .subscribe(success, failure, complete);

na przykład:

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

Zwykle pobierasz wyniki z wywołania zwrotnego sukcesu i przypisujesz je do swojej zmiennej. wywołanie zwrotne błędu jest oczywiste. pełne wywołanie zwrotne służy do określenia, czy otrzymałeś ostatnie wyniki bez żadnych błędów. Na Twoim plunkerze pełne wywołanie zwrotne będzie zawsze wywoływane po pomyślnym lub błędnym wywołaniu zwrotnym.

2- Drugim błędem, dzwoniłeś .json()na .map(res => res.json()), wtedy nazywa się je ponownie zwrotnego sukces obserwowalne. .map()jest transformatorem, który przekształci wynik do tego, co zwrócisz (w twoim przypadku .json()), zanim zostanie przekazany do wywołania zwrotnego sukcesu, powinieneś wywołać go raz na jednym z nich.

Koncepcje

Observables w skrócie dotyczy asynchronicznego przetwarzania i zdarzeń. W porównaniu do obietnic można to opisać jako obserwowalne = obietnice + zdarzenia.

Wspaniałe w przypadku obserwabli jest to, że są leniwe, można je anulować i można w nich zastosować pewne operatory (np. map, ...). Pozwala to na obsługę rzeczy asynchronicznych w bardzo elastyczny sposób.

Świetną próbką opisującą najlepiej moc obserwabli jest sposób połączenia wejścia filtra z odpowiednią przefiltrowaną listą. Kiedy użytkownik wprowadza znaki, lista jest odświeżana. Observables obsługują odpowiednie żądania AJAX i anulują poprzednie żądania w toku, jeśli inne jest wyzwalane przez nową wartość na wejściu. Oto odpowiedni kod:

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

( textValuejest sterowaniem skojarzonym z wejściem filtra).

Oto szerszy opis takiego przypadku użycia: Jak obserwować zmiany formy w Angular 2? .

Istnieją dwie świetne prezentacje na AngularConnect 2015 i EggHead:

• Observables vs obietnice - https://egghead.io/lessons/rxjs-rxjs-observables-vs-promises
• Tworzenie-obserwowalne - https://egghead.io/lessons/rxjs-creating-an-observable
• Szczegółowy opis RxJS https://www.youtube.com/watch?v=KOOT7BArVHQ
• Przepływ danych w Angular 2 - https://www.youtube.com/watch?v=bVI5gGTEQ_U

Christoph Burgdorf napisał również kilka świetnych postów na ten temat:

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

W akcji

W rzeczywistości, jeśli chodzi o twój kod, pomieszałeś dwa podejścia ;-) Oto one:

• Zarządzaj obserwowalnymi samodzielnie . W takim przypadku jesteś odpowiedzialny za wywołanie subscribemetody na obserowalnej i przypisanie wyniku do atrybutu komponentu. Następnie możesz użyć tego atrybutu w widoku do iteracji po kolekcji:

  @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();
     }
  }
  

  Zwroty z obu metod geti mapmetod są obserwowalne, a nie wynikiem (w taki sam sposób, jak w przypadku obietnic).

• Pozwól zarządzać obserwowalnymi za pomocą szablonu Angular . Możesz również wykorzystać asyncpotok do niejawnego zarządzania obserwowalnymi. W takim przypadku nie ma potrzeby jawnego wywoływania subscribemetody.

  @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());
     }
  }
  

Możesz zauważyć, że obserwable są leniwe. Tak więc odpowiednie żądanie HTTP zostanie wywołane tylko raz, gdy odbiornik zostanie do niego dołączony przy użyciu subscribemetody.

Możesz również zauważyć, że mapmetoda jest używana do wyodrębnienia zawartości JSON z odpowiedzi i wykorzystania jej następnie w obserwowalnym przetwarzaniu.

Mam nadzieję, że to ci pomoże, Thierry

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

Interfejs API HttpClient został wprowadzony w wersji 4.3.0. Jest to ewolucja istniejącego interfejsu API HTTP i ma własny pakiet @ angular / common / http. Jedną z najbardziej znaczących zmian jest to, że teraz obiekt odpowiedzi jest domyślnie JSON, więc nie ma już potrzeby analizowania go metodą map. Od razu możemy użyć jak poniżej

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