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

Question

Теперь у меня есть начальная страница, где у меня есть три ссылки. После того, как вы нажмете на последнюю ссылку «друзья», начнут инициироваться соответствующие друзья. Там, Я хочу получить/получить список моих друзей, занятых в файле 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. 

     } 
    } 

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

Answer 1

Здесь вы заладилось:

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")} 
); 

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

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

Answer 2

Концепция

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

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

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

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

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

Это более широкое описание такого прецедента: How to watch for form changes in Angular 2?.

Есть две большие презентации на AngularConnect 2015 и Умник:

• наблюдаемых против обещаний - 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
• Угловых 2 данных Поток - https://www.youtube.com/watch?v=bVI5gGTEQ_U

Christoph Бургдорфа также написал некоторые большие сообщения в блоге на тему:

• 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 из ответа и использования его в наблюдаемой обработке.

Надеется, что это помогает вам, Thierry

Answer 3

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

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

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