简介
@wheelerlaw/angular-in-memory-web-api 是一个模拟 REST API 的插件，可用于 Angular 应用程序中的开发和测试，并且不需要真正的后端服务器。在开发阶段，它可以模拟服务端 API，这样就可以专注于前端的开发。
安装
1.在命令行中运行以下命令：
npm install angular-in-memory-web-api --save-dev
2.然后，在你的 Angular 应用程序的 AppModule 中引入 InMemoryWebApiModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ------------------------------ - ---- ----------------------------
------ - ------------------- - ---- ---------------------------
-----------
------------- -
------------
--
-------- -
--------------
-- --- ------------------------------ ------ ---------- ---- --------
-- --- ------- --------- ------ ----------
-- ------ -- ---- - ---- ------ -- ----- -- ------- ---------
----------------------------------------------------------- - ------------------ ----- --
--
---------- ---
---------- --------------
--
------ ----- --------- - -3.在 InMemoryDataService 中定义模拟数据：
-- -------------------- ---- -------
------ - ----------------- - ---- ----------------------------
------ ----- ------------------- ---------- ----------------- -
---------- -
----- ------ - -
- --- --- ----- --- ----- --
- --- --- ----- ------- --
- --- --- ----- ---------- --
- --- --- ----- ----------- --
- --- --- ----- --------- --
- --- --- ----- ----------- --
- --- --- ----- -------- --
- --- --- ----- --- --- --
- --- --- ----- ------- --
- --- --- ----- --------- -
--
------ - ------ --
-
-4.在你的组件中使用 HttpClient 请求：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
--------- -
------------------
--- ---------------
--- ----------- ---- -- --------
-- ---------------------------------
-------------
----
-----
-----
--
---------- -----------------------
--
------ ----- ------------ -
----- - ----- -- --------
------- ------
------------------- ----- ----------- - -
---------- -
-----------------
-
----------- -
----------------------------------
----------------- -- ----------- - --------
-
-拓展
InMemoryDataService 还支持更多的模拟数据操作，如新建、更新、删除等操作。
在参考官方文档后，我们可以通过实现 InMemoryDbService 接口中的一些方法去实现这些功能，如下：
-- -------------------- ---- -------
------ ----- ------------------- ---------- ----------------- -
---------- -
----- ------ - -
- --- --- ----- --- ----- --
- --- --- ----- ------- --
- --- --- ----- ---------- --
- --- --- ----- ----------- --
- --- --- ----- --------- --
- --- --- ----- ----------- --
- --- --- ----- -------- --
- --- --- ----- --- --- --
- --- --- ----- ------- --
- --- --- ----- --------- -
--
------ - ------ --
-
-- ----------------------------------------
------------- ------------ -
-- ---------------------------------------- -
----- ---- - - --- ----------- ----- --------------------------- --
-----------------------
------ -------------------------------- -- --
------- ----
----- ----
----
-
------ ----------
-
-- ----------
------------ ------------ -
-- ---------------------------------------- -
----- -- - -----------------------------
----- ---- - ------------------ -- ---- --- -----
------ -------------------------------- -- --
------- ----
----- ----
----
-
------ ----------
-
-- ------
------------ ------------ -
-- ---------------------------------------- -
----- -- - -----------------------------
----- ---- - ------------------ -- ---- --- -----
----- ----- - --------------------------
----- ------- - --------------------
------------------ - --------
------ -------------------------------- -- --
------- ----
----- -------
----
-
------ ----------
-
-- ------
--------------- ------------ -
-- ---------------------------------------- -
----- -- - -----------------------------
----- ---- - ------------------ -- ---- --- -----
----- ----- - --------------------------
------------------------- ---
------ -------------------------------- -- --
------- ---
----
-
------ ----------
-
-总结
我们学会了使用 @wheelerlaw/angular-in-memory-web-api 插件去模拟 REST API，可以加速前端开发中的调试工作，同时这个插件也让我们不再需要在开发前端的时候要先部署一个后端服务，极大的减小了开发难度。
除此之外，我们还学会了如何在 InMemoryDbService 中定义模拟数据并实现一些基础的模拟数据操作，从而使我们可以更灵活地应对前端开发中出现的各种需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005529181e8991b448d0085