更新时间:2022-09-09 16:34:32
借助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方法: