前置知识
在学习 angular-in-memory-web-api 之前，需要先掌握 Angular 框架的基本知识，包括 TypeScript 语言、组件、服务、模块等知识点。
什么是 angular-in-memory-web-api
angular-in-memory-web-api 是一个 Angular 的模拟后端数据的 npm 包。它可以帮助开发者在开发前端页面时，不依赖于真实的后端服务，通过导入该包，使用内存维护数据，并且可以同步 HTTP 请求和响应。
安装 angular-in-memory-web-api
使用 npm 安装 angular-in-memory-web-api：
npm install angular-in-memory-web-api --save
使用 angular-in-memory-web-api
导入和注入 InMemoryDataService
在 app.module.ts 文件中，导入 InMemoryDataService 和 HttpClientModule，然后在 @NgModule 的 providers 中注入 InMemoryDataService：
-- -------------------- ---- -------
------ - ------------------- - ---- ----------------------------
------ - ---------------- - ---- -----------------------
-----------
------------- -
-------------
---
--
-------- -
--------------
----------------
--
---------- -
-------------------
--
---------- --------------
--
------ ----- --------- - -创建模拟数据
在 app.module.ts 相同级别的目录下，创建 in-memory-data.service.ts 文件，并实现 InMemoryDataService 接口。
-- -------------------- ---- -------
------ - ----------------- - ---- ----------------------------
------ ----- ------------------- ---------- ----------------- -
---------- -
----- ------ - -
- --- --- ----- --- ----- --
- --- --- ----- ------- --
- --- --- ----- ---------- --
- --- --- ----- ----------- --
- --- --- ----- --------- --
- --- --- ----- ----------- --
- --- --- ----- -------- --
- --- --- ----- --- --- --
- --- --- ----- ------- --
- --- --- ----- --------- -
--
------ - ------ --
-
-createDb 函数返回一组模拟数据，可以根据需要自定义返回值。
现实数据
在组件中调用 http.get 方法，来获取模拟数据。具体示例如下：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---- - ---- ---------
------ - ---------- - ---- -------
------ - ---- ---------- - ---- -----------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- ---------- ------ -
-------- -------------------
------------------- ----- ----------- - -
----------- ---- -
------------ - -----------------------------------
------
-------- -- -------------------
---------------- -- -------------------
--
-
-在组件中，声明一个 Observable 类型的 heroes$ 对象，然后在 ngOnInit 函数中订阅服务，并赋值给 heroes$ 对象。
在 html 模板文件中，使用 *ngFor 循环 heroes$ 对象，来显示模拟数据。
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes$ | async" (click)="onSelected(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>模拟 RESTful API
InMemoryDataService 还提供了一些辅助函数，使我们能够模拟真实的 RESTful API。例如，我们可以使用 inMemoryWebApiModule 函数来模拟 Post 请求：
-- -------------------- ---- -------
------ - ------------------------------ - ---- ----------------------------
-----------
-------- -
---
----------------------------------------------------------- - ------ ---- ------------------ ----- --
--
---
--
------ ----- --------- - -使用 HttpClientInMemoryWebApiModule.forRoot 函数注册 InMemoryDataService 服务，并指定一些选项。
例如，{ delay: 500 } 选项将延迟每个请求 500 毫秒，{ dataEncapsulation: false } 选项将重新映射请求的 URL，以便它们不会被附加到以 "api/" 开头的路径上。
总结
angular-in-memory-web-api 是一个非常有用的 npm 包，它简化了前端开发中的一些工作。本文介绍了如何使用该包，涵盖了从安装到模拟 RESTful API 的整个流程。通过学习本文，读者可以掌握使用 angular-in-memory-web-api 的基本技能，并可以在实际开发中结合业务需求灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/62078