背景
在 SPA（Single Page Application）应用中，前端需要与后端进行数据交互。在开发过程中，后端可能还没有完成对应的接口，或者需要对接口进行测试，这时候就需要前端模拟数据请求。AngularJS 提供了 $http 服务，可以方便地实现模拟数据请求。
$http 服务
$http 是 AngularJS 中用于进行 HTTP 请求的服务。它可以发送 GET、POST、PUT、DELETE 等请求，并且支持 Promise 风格的异步编程。
发送 GET 请求
下面是一个发送 GET 请求的示例代码：
-----------------------
------------------------ -
------------ - --------------
---这段代码中，$http.get() 方法用于发送 GET 请求，请求的 URL 是 /api/users。请求成功后，使用 then() 方法处理响应，将响应数据赋值给 $scope.users 变量。
发送 POST 请求
下面是一个发送 POST 请求的示例代码：
------------------------ ------ ------- ---- ----
------------------------ -
---------------------------------
---这段代码中，$http.post() 方法用于发送 POST 请求，请求的 URL 是 /api/users。请求体是一个对象，包含两个属性 name 和 age。请求成功后，使用 then() 方法处理响应，将响应数据添加到 $scope.users 变量中。
发送 PUT 请求
下面是一个发送 PUT 请求的示例代码：
------------------------- ------ ------- ---- ----
------------------------ -
--------------- - --------------
---这段代码中，$http.put() 方法用于发送 PUT 请求，请求的 URL 是 /api/users/1。请求体是一个对象，包含两个属性 name 和 age。请求成功后，使用 then() 方法处理响应，将响应数据更新到 $scope.users[0] 变量中。
发送 DELETE 请求
下面是一个发送 DELETE 请求的示例代码：
----------------------------
------------------------ -
---------------------- ---
---这段代码中，$http.delete() 方法用于发送 DELETE 请求，请求的 URL 是 /api/users/1。请求成功后，使用 then() 方法处理响应，将 $scope.users 数组中的第一个元素删除。
模拟数据请求
在前端开发过程中，我们可能需要模拟数据请求。这时候可以使用 $httpBackend 服务，它可以拦截 $http 服务发送的请求，并返回模拟数据。
下面是一个模拟 GET 请求的示例代码：
----------------------- ---
--------------------------- -
--- ----- - ----- -- ----- ------- ---- ---- ---- -- ----- ------- ---- -----
--------------------------------------------------
---这段代码中，$httpBackend.whenGET() 方法用于拦截 GET 请求，请求的 URL 是 /api/users。调用 respond() 方法返回模拟数据，这里返回了一个包含两个用户的数组。
下面是一个模拟 POST 请求的示例代码：
----------------------- ---
--------------------------- -
--- ----- - ----- -- ----- ------- ---- ---- ---- -- ----- ------- ---- -----
------------------------------------------------------------ ---- ----- -
--- ---- - -----------------------
------- - ------------ - --
-----------------
------ ----- ----- ----
---
---这段代码中，$httpBackend.whenPOST() 方法用于拦截 POST 请求，请求的 URL 是 /api/users。调用 respond() 方法返回模拟数据，这里返回了添加了 id 属性的用户对象。
下面是一个模拟 PUT 请求的示例代码：
----------------------- ---
--------------------------- -
--- ----- - ----- -- ----- ------- ---- ---- ---- -- ----- ------- ---- -----
------------------------------------------- ---------- ---------- -------
------------------------- ---- ----- -------- ------- -
--- -- - --------------------
--- ---- - -----------------------
--- ----- - --------------------------- - ------ ---- --- --- ---
------------ - -----
------ ----- ----- ----
---
---这段代码中，$httpBackend.whenPUT() 方法用于拦截 PUT 请求，请求的 URL 是 /api/users/:id。调用 respond() 方法返回模拟数据，这里返回了更新后的用户对象。
下面是一个模拟 DELETE 请求的示例代码：
----------------------- ---
--------------------------- -
--- ----- - ----- -- ----- ------- ---- ---- ---- -- ----- ------- ---- -----
---------------------------------------------- ---------- -------
------------------------- ---- ----- -------- ------- -
--- -- - --------------------
--- ----- - --------------------------- - ------ ---- --- --- ---
------------------- ---
------ ----- ----- ----
---
---这段代码中，$httpBackend.whenDELETE() 方法用于拦截 DELETE 请求，请求的 URL 是 /api/users/:id。调用 respond() 方法返回模拟数据，这里返回了空响应。
总结
在 AngularJS 中，$http 服务可以方便地发送 HTTP 请求，$httpBackend 服务可以拦截 HTTP 请求并返回模拟数据。在前端开发过程中，使用这两个服务可以方便地模拟数据请求，提高开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/656917d0d2f5e1655d1a8b56