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<Hero[]> {
return this.http.get<Hero[]>(this.heroesUrl)
.pipe(
catchError(this.handleError('getHeroes', []))
);
}

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

handleError返回给 catchError 返回一个错误处理函数，

操作名、出错时要返回的安全值
private handleError<T> (operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
// 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<Hero> {
const url = `${this.heroesUrl}/${id}`;
return this.http.get<Hero>(url).pipe(
tap(_ => this.log(`fetched hero id=${id}`)),
catchError(this.handleError<Hero>(`getHero id=${id}`))
);
}

修改

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

<button (click)="save()">save</button>

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

src/app/hero-detail/hero-detail.component.ts (save)
save(): void {
this.heroService.updateHero(this.hero)
.subscribe(() => this.goBack());
}

最后

以上就是温暖期待为你收集整理的Angular--模拟数据服务器的全部内容，希望文章能够帮你解决Angular--模拟数据服务器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。