Angular In-memory Web API使用介绍
Angular In-memory Web API使用介绍
借助In-Memory Web API，Angular应用的HttpClient发送请求之后，会自动被In-memory Web API拦截，在in-memory数据存储器中管理，并返回模拟的数据响应。
After installing the module, the app will make requests to and receive responses from the HttpClient without knowing that the In-memory Web API is intercepting those requests, applying them to an in-memory data store, and returning simulated responses.
安装方法：使用下面的命令行：
npm install angular-in-memory-web-api --save
9秒钟就完成了安装：
在app module里导入：
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';并添加到NgModule的imports区域内：
目前还缺少一个in-memory-data.service,
使用下列的命令行生成：
ng generate service InMemoryData
inMemoryData service的实现代码：
import { Injectable } from '@angular/core';
import { InMemoryDbService } from 'angular-in-memory-web-api';
import { Hero } from './heroes/hero';
@Injectable({
providedIn: 'root',
})
export class InMemoryDataService implements InMemoryDbService {
createDb() {
const heroes = [
{ id: 11, name: 'Dr Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];
return {heroes};
}
// Overrides the genId method to ensure that a hero always has an id.
// If the heroes array is empty,
// the method below returns the initial number (11).
// if the heroes array is not empty, the method below returns the highest
// hero id + 1.
genId(heroes: Hero[]): number {
return heroes.length > 0 ? Math.max(...heroes.map(hero => hero.id)) + 1 : 11;
}
}在hero service里，通过构造函数参数注入http client：
定义一个私有属性：
private heroesUrl = ‘api/heroes’; // URL to web api
这个property的值符合格式：/
其中base是请求的资源，而collectionName是in-memory-data-service.ts中的heroes对象：
在hero service里，将之前of返回的fake hero数据替换成使用http请求：
运行时的调试
入口是observable的subscribe方法：
http请求在http.js的intercept方法里被拦截了：
In-Memory Web API的服务方式是lazy load，即第一次需要服务之前才会初始化内存数据库：
此处调用开发人员在应用程序里编写的createDb方法：
