Angular--模拟数据服务器前端

HttpClient

打开根模块 AppModule，
从 @angular/common/http 中导入 HttpClientModule 符号，
把它加入 @NgModule.imports 数组。

模拟数据服务器内存Web API（In-momory Web API）,通过HttpClient发起请求和接收响应

npm install angular-in-memory-web-api --save

导入 HttpClientInMemoryWebApiModule 和 InMemoryDataService 类

import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api'; import { InMemoryDataService }from './in-memory-data.service';

import { HttpClient, HttpHeaders } from '@angular/common/http';

把 HttpClient 注入到构造函数中一个名叫 http 的私有属性中。constructor( private http: HttpClient, private messageService: MessageService) { }private log(message: string) { this.messageService.add('HeroService: ' + message); }private heroesUrl = 'api/heroes'; // URL to web api

HttpClient.get 返回响应数据
响应体当做无类型的 JSON 对象进行返回，借助 RxJS 的 map 操作符对 Observable 的结果进行处理，以便把这些数据挖掘出来。
错误处理
使用 RxJS 的 catchError() 操作符来建立对 Observable 结果的处理管道（pipe）。

import { catchError, map, tap } from 'rxjs/operators'; getHeroes (): Observable { return this.http.get(this.heroesUrl) .pipe( catchError(this.handleError('getHeroes', [])) ); }

catchError() 操作符会拦截失败的 Observable。它把错误对象传给错误处理器，错误处理器会处理这个错误。
handleError返回给 catchError 返回一个错误处理函数，

操作名、出错时要返回的安全值 private handleError (operation = 'operation', result?: T) { return (error: any): Observable => { // TODO: send the error to remote logging infrastructure console.error(error); // log to console instead // TODO: better job of transforming error for user consumption this.log(`${operation} failed: ${error.message}`); // Let the app keep running by returning an empty result. return of(result as T); }; }

窥探 Observable 的数据流，并通过 log() 函数往页面底部发送一条消息。
tap 操作符查看 Observable 中的值
通过 id 获取
通过 api/hero/:id 的形式根据 id 获取单个对象，如果id查找不到，出现404

getHero(id: number): Observable { const url = `${this.heroesUrl}/${id}`; return this.http.get(url).pipe( tap(_ => this.log(`fetched hero id=${id}`)), catchError(this.handleError(`getHero id=${id}`)) ); }

修改
添加保存按钮，绑定click时间，事件绑定会调用组件中一个名叫 save() 的新方法：

使用updateHero() 方法保存修改，返回前一个视图，会使用 http.put()将修改