Angular2 http.get ()、 map ()、 ordering ()和可观察模式——基本理解

现在，我有一个初始页面，我有三个链接。一旦你点击最后一个“好友”链接，合适的好友组件就会启动。在那里, 我想获取/获取连接到 friends. json 文件中的朋友列表。 直到现在一切都很好。但我仍然是 angular2 HTTP 服务的新手，使用的是 RxJs 的观察、映射和订阅概念。我试着去理解它，阅读一些文章，但是直到我进入实际工作，我才能正确地理解这些概念。

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

普林克

我的朋友们

 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.


}
}

请指导和解释正确。我知道这将有利于很多新的开发人员。

383092 次浏览
小开
最佳答案

这就是你的错误之处:

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-第二个错误，你在 .map(res => res.json())上调用 .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是与过滤器输入相关联的控件)。

下面是对这种用例的更广泛的描述: 如何观察角度2的形状变化？。

AngularConnect 2015和 EggHead 有两个很棒的演讲:

克里斯托弗 · 伯格多夫(Christoph Burgdorf)也在这个主题上写了一些很棒的博客文章:

行动中

事实上，关于您的代码，您混合了两种方法; ——以下是它们:

  • 用你自己的 管理可观察的。在这种情况下，您负责调用可观察的 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());
}
}

You can notice that observables are lazy. So the corresponding HTTP request will be only called once a listener with attached on it using the subscribe method.

You can also notice that the map method is used to extract the JSON content from the response and use it then in the observable processing.

Hope this helps you, Thierry

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

HttpClient API 是在4.3.0版本中引入的。它是对现有 HTTP API 的改进，并且有自己的包@angle/common/HTTP。 最值得注意的变化之一是，现在响应对象在默认情况下是一个 JSON，因此不再需要使用 map 方法来解析它。我们可以像下面这样直接使用

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

提交答案