Angular2 http.get (), map (), subscribe () и наблюдаемый шаблон - базовое понимание

Теперь у меня есть начальная страница, где у меня есть три ссылки. Как только вы нажмете на последнюю ссылку «друзья», появится соответствующий компонент друзей. Там я хочу получить / просмотреть список моих друзей в файле friends.json. До сих пор все работает отлично. Но я все еще новичок в HTTP-сервисе angular2, использующем концепцию RxJs «карта, подписка». Я пытался понять это и прочитал несколько статей, но пока я не приступлю к практической работе, я не пойму эти концепции должным образом.

Здесь я уже сделал plnkr, который работает, кроме работы, связанной с 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.

       }
  }

Пожалуйста, направьте и объясните правильно. Я знаю, что это будет очень полезно для многих новых разработчиков.

Вот где вы ошиблись:

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

так должно быть:

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

или

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

Вы сделали две ошибки:

1- Вы присвоили наблюдаемое себе this.result. Когда вы на самом деле хотели назначить список друзей this.result. Правильный способ сделать это:

• Вы подписываетесь на наблюдаемое. .subscribeэто функция, которая на самом деле выполняет наблюдаемое. Требуется три параметра обратного вызова:

  .subscribe(success, failure, complete);

например:

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

Обычно вы берете результаты из обратного вызова success и присваиваете его своей переменной. обратный вызов ошибки не требует пояснений. полный обратный вызов используется для определения того, что вы получили последние результаты без каких-либо ошибок. На вашем поршне полный обратный вызов всегда будет вызываться после успешного завершения или обратного вызова с ошибкой.

2- Вторая ошибка, вы позвонили .json()на .map(res => res.json()), то вы снова назвали его на успех обратного вызова наблюдаемых. .map()это преобразователь, который преобразует результат во все, что вы возвращаете (в вашем случае .json()), прежде чем он будет передан обратному вызову успеха, вы должны вызывать его один раз на любом из них.

Концепции

Наблюдаемые в коротких решениях асинхронной обработки и событий. По сравнению с обещаниями это можно описать как наблюдаемые = обещания + события.

Что замечательно с наблюдаемыми, так это то, что они ленивы, их можно отменить, и вы можете применить к ним некоторые операторы (например map, ...). Это позволяет обрабатывать асинхронные вещи очень гибко.

Отличным примером, описывающим наилучшие возможности наблюдаемых, является способ подключения входа фильтра к соответствующему отфильтрованному списку. Когда пользователь вводит символы, список обновляется. Observables обрабатывают соответствующие запросы AJAX и отменяют предыдущие незавершенные запросы, если другой инициируется новым значением во входных данных. Вот соответствующий код:

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

( textValueэто элемент управления, связанный с входом фильтра).

Вот более широкое описание такого варианта использования: Как отслеживать изменения формы в Angular 2? ,

На AngularConnect 2015 и EggHead есть две отличные презентации:

• Наблюдаемые против обещаний - https://egghead.io/lessons/rxjs-rxjs-observables-vs-promises
• Создание-наблюдаемый - https://egghead.io/lessons/rxjs-creating-an-observable
• RxJS Углубленный https://www.youtube.com/watch?v=KOOT7BArVHQ
• Поток данных Angular 2 - https://www.youtube.com/watch?v=bVI5gGTEQ_U

Кристоф Бургдорф также написал несколько отличных постов в блоге на эту тему:

• 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

в действии

На самом деле в отношении вашего кода вы смешали два подхода ;-) Вот они:

• Управляйте наблюдаемым самостоятельно . В этом случае вы обязаны вызвать subscribeметод для наблюдаемой и назначить результат в атрибут компонента. Затем вы можете использовать этот атрибут в представлении для перебора коллекции:

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

  Возвраты от обоих методов getи mapметодов являются наблюдаемым, а не результатом (так же, как с обещаниями).

• Позвольте управлять наблюдаемым по угловому шаблону . Вы также можете использовать asyncканал для неявного управления наблюдаемым. В этом случае нет необходимости явно вызывать subscribeметод.

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

Вы можете заметить, что наблюдаемые являются ленивыми. Таким образом, соответствующий HTTP-запрос будет вызван только один раз, когда прослушиватель подключен к нему, используя subscribeметод.

Вы также можете заметить, что mapметод используется для извлечения содержимого JSON из ответа и использования его затем в наблюдаемой обработке.

Надеюсь, это поможет тебе, Тьерри

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

HttpClient API был представлен в версии 4.3.0. Это развитие существующего HTTP API и имеет собственный пакет @ angular / common / http. Одним из наиболее заметных изменений является то, что теперь объектом ответа является JSON по умолчанию, поэтому больше нет необходимости анализировать его с помощью метода map. Теперь сразу можно использовать, как показано ниже

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