Angular--模拟数据服务器

HttpClient

  • 打开根模块 AppModule
  • @angular/common/http 中导入 HttpClientModule 符号,
  • 把它加入 @NgModule.imports 数组。
模拟数据服务器 内存Web API(In-momory Web API),通过HttpClient发起请求和接收响应
npm install angular-in-memory-web-api --save

导入 HttpClientInMemoryWebApiModuleInMemoryDataService
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()将修改
src/app/hero-detail/hero-detail.component.ts (save)save(): void { this.heroService.updateHero(this.hero) .subscribe(() => this.goBack()); }







【Angular--模拟数据服务器】

    推荐阅读