我正在尝试使用 Angular 2-beta 并且我想使用 Http 组件。但是这里有一个严重的问题：
我读了this 和 我知道在 Angular 2（与 Angular 1 不同）中，Http 组件不是返回 Promise 的服务。它返回一个叫做 Observable 的东西。我们知道一个组件最好不要直接使用Http。有效的方法是制作一个负责消费Http的服务。但是怎么办？！这是否应该在完成请求后返回一个承诺？ （看here）
这有意义吗？！
【问题讨论】：
.toPromise() 后跟.then() 调用链来使用HTTP 作为承诺。尽管如此，observables 是推荐的方法。
标签： javascript angular
不需要将 Http 的 get() 方法返回的 observable 转换为 promise。在大多数情况下，服务可以简单地返回 observable。
如果我们从服务器获取 array 或 原始类型（即字符串、数字、布尔值），我们可以通过使用返回的可以直接在我们的模板中使用asyncPipe 观察。该管道将自动订阅可观察对象（它也适用于承诺），并将返回可观察对象发出的最新值。当发出新值时，管道会标记要检查更改的组件，因此视图将自动更新为新值。
如果我们从服务器获取 对象，我不知道有什么方法可以使用 asyncPipe，我们可以使用 async 管道，结合安全导航算子如下：
{{(objectData$ | async)?.name}}
但这看起来很复杂，我们必须为我们想要显示的每个对象属性重复此操作。
相反，我建议我们 subscribe() 到组件中的 observable 并将包含的对象存储到组件属性中。然后我们在模板中使用safe navigation operator (?.) 或（正如@Evan Plaice 在评论中提到的）NgIf。如果我们不使用安全导航操作符或 NgIf，当模板第一次尝试渲染时会抛出错误，因为对象还没有填充值。
注意下面的服务如何总是为每个 get 方法返回一个 observable。
service.ts
import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/add/operator/map'; // we need to import this now
@Injectable()
export class MyService {
constructor(private _http:Http) {}
getArrayDataObservable() {
return this._http.get('./data/array.json')
.map(data => data.json());
}
getPrimitiveDataObservable() {
return this._http.get('./data/primitive.txt')
.map(data => data.text()); // note .text() here
}
getObjectDataObservable() {
return this._http.get('./data/object.json')
.map(data => data.json());
}
}
app.ts
import {Component} from 'angular2/core';
import {MyService} from './my-service.service';
import {HTTP_PROVIDERS} from 'angular2/http';
@Component({
selector: 'my-app',
providers: [HTTP_PROVIDERS, MyService],
template: `
<div>array data using '| async':
<div *ngFor="#item of arrayData$ | async">{{item}}</div>
</div>
<div>primitive data using '| async': {{primitiveData$ | async}}</div>
<div>object data using ?.: {{objectData?.name}}</div>
<div *ngIf="objectData">object data using NgIf: {{objectData.name}}</div>`
})
export class AppComponent {
constructor(private _myService:MyService) { console.clear(); }
ngOnInit() {
this.arrayData$ = this._myService.getArrayDataObservable();
this.primitiveData$ = this._myService.getPrimitiveDataObservable();
this._myService.getObjectDataObservable()
.subscribe(data => this.objectData = data);
}
}
注意：我在服务方法名称中加上“Observable”——例如，getArrayDataObervable()——只是为了强调该方法返回一个 Observable。通常你不会在名字中加上“Observable”。
数据/array.json
[ 1,2,3 ]
数据/primitive.json
Greetings SO friends!
数据/object.json
{ "name": "Mark" }
输出：
array data using '| async':
1
2
3
primitive data using '| async': Greetings SO friends!
object data using .?: Mark
object data using NgIf: Mark
使用async 管道的一个缺点是没有机制来处理组件中的服务器错误。我answered another question 解释了如何在组件中捕获此类错误，但在这种情况下我们总是需要使用subscribe()。
【讨论】：
? (elvis) 运算符的一个有用替代方法是将*ngIf 条件添加到将使用数据的模板部分。它提供了更粗粒度的控制，因此您不必担心将 elvis 运算符洒在整个模板上，也不必担心模板在没有数据的情况下呈现时的外观。
Angular 2 可以实现服务。它们仅对应于可注入类，如下所述。在这种情况下，可以将此类注入到其他元素中，例如组件。
import {Injectable} from 'angular2/core';
import {Http, Headers} from 'angular2/http';
import 'rxjs/add/operator/map';
@Injectable()
export class CompanyService {
constructor(http:Http) {
this.http = http;
}
}
您可以在引导应用程序的主要组件时在指定HTTP_PROVIDERS 的条件下向其中注入一个Http 对象（使用其构造函数）：
import {bootstrap} from 'angular2/platform/browser'
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component'
bootstrap(AppComponent, [
HTTP_PROVIDERS
]);
然后可以将该服务注入到组件中，如下所述。不要忘记在组件的providers 列表中指定它。
import { Component, View, Inject } from 'angular2/core';
import { CompanyService } from './company-service';
@Component({
selector: 'company-list',
providers: [ CompanyService ],
template: `
(...) `
})
export class CompanyList {
constructor(private service: CompanyService) {
this.service = service;
}
}
然后您可以在您的服务中实现一个利用Http 对象的方法，并返回与您的请求对应的 Observable 对象：
@Injectable()
export class CompanyService {
constructor(http:Http) {
this.http = http;
}
getCompanies() {
return this.http.get('https://angular2.apispark.net/v1/companies/')
.map(res => res.json());
}
}
然后组件可以调用getCompanies 方法并订阅 Observable 对象上的回调，以便在响应存在时通知更新组件的状态（与您在 Angular1 中使用 Promise 的方式相同）：
export class CompanyList implements OnInit {
public companies: Company[];
constructor(private service: CompanyService) {
this.service = service;
}
ngOnInit() {
this.service.getCompanies().subscribe(
data => this.companies = data);
}
}
编辑
正如foxx 在他的评论中建议的那样，async 管道也可以用于隐式订阅可观察对象。这是使用它的方法。首先更新你的组件，将 observable 对象放入你要显示的属性中：
export class CompanyList implements OnInit {
public companies: Company[];
constructor(private service: CompanyService) {
this.service = service;
}
ngOnInit() {
this.companies = this.service.getCompanies();
}
}
然后在模板中使用异步管道：
@Component({
selector: 'company-list',
providers: [ CompanyService ],
template: `
<ul>
<li *ngFor="#company of companies | async">{{company.name}}</li>
</ul>
`
})
export class CompanyList implements OnInit {
(...)
}
这篇文章分为两部分也可以提供更多细节：
希望对你有帮助 蒂埃里
【讨论】：
HTTP_PROVIDERS，但注入了ROUTER_PROVIDERS。是错字吗？
async 管道。