当我们编写 AngularJS 应用程序时，经常需要使用 $http 服务来从服务器获取数据。为了确保代码的正确性和可靠性，我们需要在测试时对 HTTP 请求的结果进行模拟。本文将介绍如何在 AngularJS 控制器中，利用 $httpBackend 来模拟 $http.get 请求的返回值。
前置要求
在开始本教程之前，请确保您已经安装了以下软件：
- Node.js
- AngularJS 1.x
- Karma 测试框架
了解 $httpBackend
$httpBackend 是 AngularJS 中的一个内置服务，用于模拟后端服务的响应。在测试 AngularJS 应用程序时，我们通常会用它来模拟 $http 请求的响应。
$httpBackend 可以拦截发往服务器的 HTTP 请求，并根据我们预先定义的规则返回模拟数据。这意味着我们可以在不实际连接到服务器的情况下测试我们的应用程序。例如，我们可以测试一个控制器，该控制器依赖于一个 service，该 service 发出 $http 请求并处理响应。
模拟 $http.get 请求
假设我们有一个名为 UserController 的控制器，它依赖于 UserService，UserService 发出 $http.get 请求来获取用户数据。我们希望在测试中模拟 UserService 返回的数据。
首先，我们需要在我们的测试文件中注入 $httpBackend，如下所示：
-------------------------- ---------- -
--- ------------- ------------ -----------
--------------------- -
-- ----
----------------
-- -------
------------------------------- -------------- ------------- -
------------ - ---------------
----------- - --------------
---------- - -------------
---
---
-- ---
---接下来，我们需要使用 $httpBackend.whenGET() 方法来定义 $http.get 的返回值。考虑到数据可能比较复杂，我们可以将响应放在一个独立的 JSON 文件中，并使用 $httpBackend.whenGET().respond() 来加载它。
假设我们有一个名为 user.json 的文件，其中包含以下内容：
- ----- ---- ------- ----- ---- -
然后我们可以在测试用例中使用以下代码来模拟 UserService 的 $http.get 请求：
---------- --- ---- ------ ---------- -
-- ----- ---
--- --- - --------------
-- --------
--- -------- - -
--- ----
----- ----- ----
--
-- -- ------------ -----------
--------------------------------------------
-- -------
--- ---- - ------------------------------
-- -- --------- --
----------------------------
---------------------
-- ---------------
------------------------------------
---在这里，我们首先定义了请求的 URL，并将模拟的返回值保存在 response 变量中。然后，使用 $httpBackend.whenGET() 方法来拦截请求并返回模拟数据。
接下来，我们创建一个 UserController 的实例，并期望一次 $http.get 请求。最后，我们调用 $httpBackend.flush() 来执行请求，并断言控制器中的用户数据是否正确。
结论
在 AngularJS 应用程序中，我们可以使用 $httpBackend 来模拟 $http 请求的响应，以便测试控制器等组件。$httpBackend 提供了灵活的 API，可以定义各种不同的返回值，使得我们能够对应用程序行为进行全面和可靠的测试。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30143