Question

现在，我有一个初始页面，其中有三个链接。点击最后的“朋友”链接后，会启动相应的朋友组件。在那里，我想获取/获取我的朋友列表，这些朋友被列入了friends.json文件。直到现在一切正常。但我仍然是使用RxJs的observables，map，subscribe concept的angular2的HTTP服务的新手。我试图理解它并阅读一些文章，但在我开始实际工作之前，我不会理解这些概念。

这里我已经制作了除HTTP相关工作之外的plnkr。

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时。正确的方法是：

您订阅了observable。 .subscribe是实际执行observable的函数。它需要三个回调参数如下：

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

通常，您从成功回调中获取结果并将其分配给您的变量。错误回调是自解释的。完整的回调用于确定您已收到最后的结果而没有任何错误。 ~~在您的plunker上，将在成功或错误回调后始终调用完整的回调。~~

2-第二个错误，你在.json()上调用.map(res => res.json())，然后在observable的成功回调中再次调用它。 .map()是一个转换器，它会将结果转换为您返回的任何内容（在您的情况下为.json()），然后才会将其传递给成功回调你应该在其中任何一个上调用一次。

Answer 2

<强>概念

Observable简而言之就是处理异步处理和事件。与承诺相比，这可以被描述为observables = promises + events。

对于observable来说，最好的是它们很懒，它们可以被取消，你可以在它们中应用一些运算符（比如map，...）。这允许以非常灵活的方式处理异步事件。

描述最佳可观察能力的一个很好的示例是将过滤器输入连接到相应的过滤列表的方法。当用户输入字符时，列表将刷新。如果另一个请求由输入中的新值触发，则Observable处理相应的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和EggHead有两个很棒的演讲：

Observables vs promises - https://egghead.io/lessons/rxjs-rxjs-observables-vs-promises
创建一个可观察的 - https://egghead.io/lessons/rxjs-creating-an-observable
RxJS In-Depth https://www.youtube.com/watch?v=KOOT7BArVHQ
Angular 2数据流 - https://www.youtube.com/watch?v=bVI5gGTEQ_U

Christoph Burgdorf还撰写了一些关于这个主题的精彩博文：

行动

事实上，关于你的代码，你混合了两种方法;-)以下是：

通过您自己的管理可观察对象。在这种情况下，您负责在observable上调用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方法的回报是可观察的，而不是结果（与承诺相同）。

让我们通过Angular模板管理observable 。您还可以利用async管道隐式管理observable。在这种情况下，无需显式调用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());
   }
}

您可以注意到可观察者是懒惰的。因此，只有使用subscribe方法附加在其上的侦听器时，才会调用相应的HTTP请求。

您还可以注意到map方法用于从响应中提取JSON内容，然后在可观察的处理中使用它。

希望这可以帮到你，亨利

Answer 3

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

Angular2 http.get（），map（），subscribe（）和可观察模式 - 基本理解

3 个答案: