Angular2HTTP。get（）、map（）、subscribe（）和observable模式-基本理解

Question

现在，我有了一个初始页面，其中有三个链接。单击最后一个“好友”链接后，相应的好友组件将启动。在那里，我想把我的朋友名单变成朋友名单。json文件。到目前为止，一切都很顺利。但我仍然是angular2的HTTP服务的新手，使用RxJs的可观测、映射、订阅概念。我试着理解它，读了几篇文章，但在我进入实际工作之前，我不会正确理解这些概念。

这里我已经做了plnkr，除了HTTP相关的工作。

Plnkr

我的朋友们。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

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

Answer 2

概念

简而言之，可观察性解决了异步处理和事件。与promise相比，这可以被描述为可观察到的=promise事件。

观测值的优点在于它们是懒惰的，可以取消它们，并且可以在其中应用一些操作符（比如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上有两个很棒的演讲：

• 观察与promise-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

Christoph Burgdorf也写了一些很棒的博客文章：

• 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

在行动中

事实上，关于代码，您混合了两种方法；-）这些是：

>

管理你自己的可观察到的。在这种情况下，您负责调用可观察的订阅方法，并将结果分配到组件的属性中。然后，您可以在视图中使用此属性对集合进行迭代：

@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方法的返回都是可观察的，而不是结果（与promise的方式相同）。

让我们通过角度模板来管理可观察的对象。您还可以利用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());
   }
}

您可以注意到，可观察对象是懒惰的。因此，使用subscribe方法仅调用一次相应的HTTP请求，并在其上附加一个侦听器。

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

希望这对你有帮助蒂埃里

Answer 3

以下是你出错的地方：

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-您将可观察对象本身分配给此。结果。当你真的想把朋友列表分配给这个。结果。正确的方法是：

>

。订阅（成功，失败，完成）；

例如：

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

通常，您从成功回调中获取结果并将其分配给您的变量。错误回调是不言自明的。完整的回调用于确定您收到了没有任何错误的最后一个结果。 <罢工> 在您的柱塞上，完整的回调将始终在成功或错误回调之后调用。

2第二个错误，你调用. json（）on. map（res=