借助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方法：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的Angular In-memory Web API使用介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。