我们将用HTTPClient来添加一些数据持久化特效。

我们需要在App中启用HTTP服务，HttpClient是Angular通过http 与远程服务器通讯的机制。如果我们需要在整个App中使用并不需要重复导入。我们需要在AppModule顶层中从@angular/common/http 导入HttpClientModule 符号.

import { HttpClientModule } from '@angular/common/http'

并在加入@NgModule.imports 数组中。我们将可以在其他的Services中使用。并不需要重复导入。

给service创建一个从服务器获取数据的方法。

getHeroes(): Observable<object> {return this.http.get('http://localhost:8080/findByList/1', {headers: new HttpHeaders().set('Access-Control-Allow-Origin','*')});
}

 

我需要从服务器获取英雄列表，并返回Component显示。

在使用http的时候我们可以看到HttpClient 带有很多调用方式，Get , Post , Postion , Put , Delete 等。我们可以选择合适的方式调用API，常用的Get ， Post。

 

在我们获取数据的时候。我们可能会遇到一些跨域，或者需要发送认证给客户端以便通过服务器认证。我们可以把这些消息写进heades中。

由于远程服务器不会马上应答或者得到服务器的结果。那么我们在Component中。使用结果就会由于异步原因而获取不到结果。所以我们需要告诉返回Observable 模式告诉Component ， 当获取到服务器返回结果之后再做处理。

getHeroes(): Observable<Hero[]> {return this.http.get<Hero[]>('http://localhost:8080/findByList/1', {headers: new HttpHeaders().set('Access-Control-Allow-Origin','*')});
}

此方法会返回一个可广场的对象。只有再Component订阅此方法。方法才会执行,并在subscribe中处理返回结果。

//Component 中调用方式
this.heroesService.getHeroes().subscribe(her => this.heroes = her);

当service没有返回数据或者不需要处理任何数据时。你只需要显示调subscribe即可

this.heroesService.getHeroes().subscribe();

 

可能有些人对Observable会感到陌生。RxJs也提供另一种方式Promise ， 我们可以在 rxjs/operaters/toPromise中导入，并使用

getHeroes(): Promise<Hero[]> {return this.http.get('http://localhost:8080/findByList/1', {headers: new HttpHeaders().set('Access-Control-Allow-Origin','*')}).toPromise().then((response) = > {
　　　　console.log(response);//输出response
　　});
}

当我们在Component中调用getHeroes() 方法我们就可以在then中处理返回结果。

当然任何程序都有可能出现各种问题。特别是从远程服务器获取数据的时候。我们的方法应该捕获数据并做适当的处理。

要捕获错误。我们需要使用RxJS的catchError() 操作符来简历对Observable或者Primise的处理管道pipe。

import { catchError, map, tap } from 'rxjs/operators';

现在我们就可以使用pipe扩展Observable的结果。并给他一个catchError操作符。

getHeroes (): Observable<Hero[]> {return this.http.get<Hero[]>(this.heroesUrl).pipe(catchError(this.handleError('getHeroes', [])));
}

catchError() 操作符拦截失败的Observable，并把错误传给错误处理对象。所以我们把错误交给handleError。handleError（错误处理器）会处理这个错误。并返回一个无害的结果。以便应用能正常工作。

由于所有的HeroService方法都需要共享handleError方法。所以我们需要通用化错误处理器并且支持不同的需求。

/*** Handle Http operation that failed.* Let the app continue.* @param operation - name of the operation that failed* @param result - optional value to return as the observable result*/
private handleError<T> (operation = 'operation', result?: T) {return (error: any): Observable<T> => {// TODO: send the error to remote logging infrastructureconsole.error(error); // log to console instead// TODO: better job of transforming error for user consumptionthis.log(`${operation} failed: ${error.message}`);// Let the app keep running by returning an empty result.return of(result as T);};
}

以上方法将返回一个安全值。让程序继续工作。

Service 的方法将会窥探 Observable 的数据流，并通过 log() 函数往页面底部发送一条消息。

它们可以使用 RxJS 的 tap 操作符来实现，该操作符会查看 Observable 中的值，使用那些值做一些事情，并且把它们传出来。 这种 tap 回调不会改变这些值本身。

/** GET heroes from the server */
getHeroes (): Observable<Hero[]> {return this.http.get<Hero[]>(this.heroesUrl).pipe(tap(heroes => this.log('fetched heroes')),catchError(this.handleError('getHeroes', [])));
}

AsyncPipe 如你所愿，*ngFor 重复渲染出了这些英雄。 仔细看，你会发现 *ngFor 是在一个名叫 heroes$ 的列表上迭代，而不是 heroes。

<li *ngFor="let hero of heroes$ | async" >

$ 是一个命名惯例，用来表明 heroes$ 是一个 Observable，而不是数组。 *ngFor 不能直接使用 Observable。 不过，它后面还有一个管道字符（|），后面紧跟着一个 async，它表示 Angular 的 AsyncPipe。 AsyncPipe 会自动订阅到 Observable，这样你就不用再在组件类中订阅了。