在开发 Angular 应用时，我们通常需要与后端接口进行交互，但在开发初期或者后端接口还未完成时，我们需要使用 Mock Api 来模拟后端接口的返回数据，以便于前端页面的开发和调试。本文将介绍 Angular 应用中 Mock Api 的实现方式。
1. 使用 Angular In-memory Web API
Angular 提供了一个叫做 In-memory Web API 的库，可以用来模拟后端接口的返回数据。我们可以通过安装 angular-in-memory-web-api 包来使用它。
1.1 安装 angular-in-memory-web-api
可以通过以下命令来安装 angular-in-memory-web-api 包：
npm install angular-in-memory-web-api --save-dev
1.2 创建 Mock 数据
我们需要创建一个 Mock 数据的服务，可以通过以下命令来创建：
ng generate service mock-data
然后在 mock-data.service.ts 文件中定义 Mock 数据：
-- -------------------- ---- -------
------ - ----------------- - ---- ----------------------------
------ ----- --------------- ---------- ----------------- -
---------- -
----- ----- - -
- --- -- ----- ------- --
- --- -- ----- ----- --
- --- -- ----- --------- --
--
------ - ----- --
-
-在 createDb 方法中，我们可以返回一个对象，其中包含我们需要模拟的数据。
1.3 配置 HttpInterceptor
我们需要通过 HttpInterceptor 来拦截前端发起的 HTTP 请求，然后返回模拟的数据。可以通过以下代码来实现：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ -
----------
------------
----------------
------------
- ---- -----------------------
------ - ----------- -- - ---- -------
------ - ---------- - ---- -----------------
------ - --------------- - ---- ----------------------
-------------
------ ----- ------------------ ---------- --------------- -
------------------- ---------------- ---------------- --
----------
-------- -----------------
----- -----------
-- -------------------------- -
----- - ---- ------ - - --------
----- ------ - -------
-- ------------------------ -
----- -------- - ---------------
----- -------------- - ------------
----- -- - --------------- - - - ----------- - -----
----- ---------- - ------------------------------------------------
--- -----
------ -------- -
---- ------
-- ---- -
---- - ---------------------- -- ------- --- -----
- ---- -
---- - -----------
-
------
---- -------
---- - - --- ----------------- - -- --------------- --
----------------------
------
---- ------
---- - -------------
----- ----- - --------------------------- -- ------- --- -----
----------------- - -----
------
---- ---------
----- ------------- - ---------------------
------ -- ------- --- ---
--
-------------------------------- ---
------
-
------ ------ -------------- ------- ---- ---- ----
-
------ ---------------------
-
-在上述代码中，我们首先判断请求的 URL 是否以 'api/' 开头，如果是，则从 URL 中解析出集合名称和 ID，然后根据请求的方法来处理数据。最后返回一个包含模拟数据的 HttpResponse 对象。
1.4 注册 HttpInterceptor
我们需要在 app.module.ts 文件中注册 HttpInterceptor，可以通过以下代码来实现：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- ----------------- - ---- -----------------------
------ - ------------------------------ - ---- ----------------------------
------ - --------------- - ---- ----------------------
------ - ------------------ - ---- -------------------------
------ - ------------ - ---- ------------------
-----------
------------- ---------------
-------- -
--------------
-----------------
--------------------------------------------------------
--
---------- -
-
-------- ------------------
--------- -------------------
------ -----
--
--
---------- ---------------
--
------ ----- --------- --在上述代码中，我们首先导入 HttpClientModule 和 HttpClientInMemoryWebApiModule，并将 MockDataService 作为参数传递给 HttpClientInMemoryWebApiModule.forRoot 方法，以便于注册 In-memory Web API。然后在 providers 中注册 MockApiInterceptor。
2. 使用 Mock.js
除了使用 Angular In-memory Web API，我们也可以使用 Mock.js 来模拟后端接口的返回数据。Mock.js 是一个用于生成随机数据的 JavaScript 库，我们可以使用它来生成模拟数据。
2.1 安装 Mock.js
可以通过以下命令来安装 Mock.js：
npm install mockjs --save-dev
2.2 创建 Mock 数据
我们需要创建一个 Mock 数据的服务，可以通过以下命令来创建：
ng generate service mock-data
然后在 mock-data.service.ts 文件中定义 Mock 数据：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -------- - ---- --------------
------ - -- ---- ---- ---------
-------------
----------- -------
--
------ ----- --------------- -
------- --------- -------- - -
------ -
- --- -- ----- ------- --
- --- -- ----- ----- --
- --- -- ----- --------- --
--
--
------------- -
----------------------- ------ ---------------------
------------------------------ ------ --------- -- -
----- -- - ------------------------------
----- ---- - ------------------------------- -- ------- --- ----
------ -----
---
----------------------- ------- --------- -- -
----- ---- - -------------------------
------- - -------------------------- - --
-------------------------------
------ -----
---
------------------------------ ------ --------- -- -
----- -- - ------------------------------
----- ---- - -------------------------
----- ----- - ------------------------------------ -- ------- --- ----
-------------------------- - -----
------ -----
---
------------------------------ --------- --------- -- -
----- -- - ------------------------------
----- ------------- - ------------------------------
------ -- ------- --- --
--
----------------------------------------- ---
------ ---
---
-
-在上述代码中，我们首先定义了一个 MockData 对象，其中包含了我们需要模拟的数据。然后使用 Mock.mock 方法来定义 Mock 数据的 API，可以通过正则表达式来匹配 URL。在方法中，我们可以返回一个包含模拟数据的对象。
2.3 注册 HttpInterceptor
我们需要通过 HttpInterceptor 来拦截前端发起的 HTTP 请求，然后返回模拟的数据。可以通过以下代码来实现：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ -
----------
------------
----------------
------------
- ---- -----------------------
------ - ---------- - ---- -------
-------------
------ ----- ------------------ ---------- --------------- -
------------- --
----------
-------- -----------------
----- -----------
-- -------------------------- -
----- - ---- ------ - - --------
----- ------ - -------
-- ------------------------ -
------ --- --------------------- -- -
----- -------- - ---------------------------------
----------------- -------------- ------- ---- ----- -------- ----
--------------------
---
-
------ ---------------------
-
-在上述代码中，我们首先判断请求的 URL 是否以 'api/' 开头，如果是，则使用 Mock.js 来生成模拟数据。最后返回一个包含模拟数据的 HttpResponse 对象。
2.4 注册 HttpInterceptor
我们需要在 app.module.ts 文件中注册 HttpInterceptor，可以通过以下代码来实现：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- ----------------- - ---- -----------------------
------ - --------------- - ---- ----------------------
------ - ------------------ - ---- -------------------------
------ - ------------ - ---- ------------------
-----------
------------- ---------------
-------- --------------- ------------------
---------- -
----------------
-
-------- ------------------
--------- -------------------
------ -----
--
--
---------- ---------------
--
------ ----- --------- --在上述代码中，我们需要在 providers 中注册 MockDataService 和 MockApiInterceptor。
总结
本文介绍了 Angular 应用中 Mock Api 的两种实现方式：使用 Angular In-memory Web API 和使用 Mock.js。这两种方式都可以用来模拟后端接口的返回数据，以便于前端页面的开发和调试。使用 Angular In-memory Web API 可以更方便地创建 Mock 数据，而使用 Mock.js 可以更灵活地定义 Mock 数据的 API。我们可以根据实际需要来选择使用哪种方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650501ea95b1f8cacd18c758