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: ` 

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. } }

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

3 Solutions collect form web for “Angular2 http.get (), map (), subscribe () и наблюдаемый шаблон – базовое понимание”

Вот где вы поступили не так:

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

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

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

Концепции

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

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

Отличный пример, описывающий наилучшую силу наблюдаемых, – это способ подключения входа фильтра к соответствующему отфильтрованному списку. Когда пользователь вводит символы, список обновляется. Наблюдаемые обрабатывают соответствующие запросы 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 есть две отличные презентации:

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

В бою

Фактически в отношении вашего кода вы смешивали два подхода 🙂 Вот они:

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

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

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

  • Позвольте управлять наблюдаемым Угловым шаблоном . Вы также можете использовать async канал для неявного управления наблюдаемым. В этом случае нет необходимости явно вызывать метод 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()); } }

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

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

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

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

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

 http.get('friends.json').subscribe(result => this.result =result); 
  • Угловой 2 конструктор компонентов Vs OnInit
  • Вызов функции, когда ng-repeat завершен
  • Angular2 Tutorial (Tour of Heroes): Не удается найти модуль 'angular2-in-memory-web-api'
  • Угловое: не удается найти Promise, Map, Set и Iterator
  • Каким образом можно использовать угловые2 HTTP-запросы с защитой Django CSRF?
  • Свойство 'map' не существует в типе 'Observable '
  • Как группировать данные в Angular 2?
  • Я получаю «Ответ на ошибку Http для (неизвестный url): 0 Unknown Error» вместо фактического сообщения об ошибке в Angular
  • Разница между HTTP и HTTPClient в угловом 4?
  • Как перезагрузить текущий маршрут с помощью углового маршрутизатора 2
  • Угловой 2 http.post () не отправляет запрос
  • Interesting Posts

    Загрузка асинхронного файла с помощью панели выполнения

    Как рассчитать сумму столбца datatable в asp.net?

    Как заставить R использовать указанный факторный уровень в качестве ссылки в регрессии?

    Как остановить Google Chrome от просьбы настроить Chrome с помощью учетной записи Google, когда Chome открыт

    Спящий режим, весна, JPS и изоляция – индивидуальная изоляция не поддерживается

    Как заблокировать все исходящие порты в брандмауэре Windows XP?

    Linq – левое соединение в нескольких (OR) условиях

    Почему мое правило Outlook 2007 не может быть серверным при использовании правила «Отметить как прочитанное»

    Потоковая обработка больших наборов результатов с помощью MySQL

    Окно пользовательской информации для Карт Google

    Навигация и пользовательский макет

    Когда я должен высмеивать?

    Почему X присоединяется к data.tables, не допускает полного внешнего соединения или левого соединения?

    Как паровая соль помогает против атаки радужного стола?

    Размер огромных объектов, непосредственно выделенных для старого поколения

    Давайте будем гением компьютера.