javascript - 如何在 Angular 2 beta 的服务中有效地使用 Http 组件？

Question

我正在尝试使用 Angular 2-beta 并且我想使用 Http 组件。但是这里有一个严重的问题:

我读了this和我知道在 Angular 2 中(与 Angular 1 不同)，Http 组件不是返回 Promise 的服务。它返回一个叫做 Observable 的东西。我们知道一个Component最好不要直接使用Http。有效的方法是创建一个负责使用 Http 的服务。但是怎么办？!这应该在完成请求后返回一个 promise 吗？ (看here)

这有什么意义吗？!

Answer 1

可以使用 Angular 2 来实现服务。它们简单地对应于如下所述的可注入(inject)类。在这种情况下，此类可以注入(inject)到其他元素(如组件)中。

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 的条件下向其中注入(inject)一个 Http 对象(使用其构造函数):

import {bootstrap} from 'angular2/platform/browser'
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component'

bootstrap(AppComponent, [
  HTTP_PROVIDERS
]);

然后可以将该服务注入(inject)到组件中，如下所述。不要忘记在组件的 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 对象上订阅一个回调，以便在响应存在时收到通知以更新组件的状态(与您对 promises 所做的方式相同在 Angular1 中):

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 管道也可用于隐式订阅可观察对象。这是使用它的方法。首先更新您的组件以将可观察对象放入您要显示的属性中:

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://restlet.com/blog/2015/12/30/implementing-an-angular-2-frontend-over-an-apispark-hosted-web-api-part-1/
• http://restlet.com/blog/2016/01/06/implementing-an-angular-2-frontend-over-an-apispark-hosted-web-api-part-2/

希望对你有帮助，蒂埃里