AngularJS 是一个非常流行的前端框架，它提供了许多方便的功能和工具来简化前端开发。其中一个非常常见的任务是从前端调用 RESTful API。在本文中，我们将讨论如何在 AngularJS 中使用 $http 服务调用 RESTful API 以及一些最佳实践。
准备工作
在开始调用 RESTful API 之前，我们需要确保我们的项目中已经包含了 AngularJS 和 ngRoute （可选）模块。你可以使用 AngularJS 官方提供的 CDN 或者把文件下载到本地。
<!--官网CDN--> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script> <!--本地文件--> <script src="/path/to/angular.js"></script> <script src="/path/to/angular-route.js"></script>
另外，如果你的 RESTful API 需要身份验证或者授权，你需要确保你的 API 服务器已经配置好了，并且你已经拥有了正确的 API Key 和 Token 等认证信息。
使用 $http 服务调用 RESTful API
在 AngularJS 中调用 RESTful API 最常见的方法就是使用 $http 服务。与 jQuery 中的 $.ajax() 类似，$http 提供了一些参数来发送 HTTP 请求，如方法、URL、头部、数据等。一个简单的调用 RESTful API 的示例代码如下：
-- -------------------- ---- ------- -- -- ----- ---- --- -- ------- ------- ------ ---- ------------ ---------------- ------------------------- - -- --------- --------------------------- -- -------- ----------------------- - -- --------- --------------------------------- ---
这里，我们使用了 $http 服务来向 /api/user 发送了一个 GET 请求。在请求成功后，$http 返回的是一个 promise，我们可以通过传递两个回调函数来处理请求成功和请求失败的情况。
在上面的示例代码中，如果请求成功，我们将会在控制台打印出返回的数据。如果请求失败，我们将会打印出错误的状态信息。
最佳实践
在调用 RESTful API 时，有一些最佳实践可以帮助你写出更好的代码。以下是一些需要注意的点：
- 对请求的错误进行处理
在上面的示例代码中，我们只是简单地将错误打印出来了，这并不是一个好的实践方式。正确的做法是，将错误信息集中处理并组织，给用户一个友好的错误提示。
-- -------------------- ---- -------
-------
------- ------
---- ------------
---------------- ------------------------- -
-- ---------
---------------------------
-- -------- ----------------------- -
-- ---------
--------------------
---
-------- ------------------- -
-- ----------------
------ ----------------- -
---- ----
---------- ----------
------
---- ----
----------------------
------
---- ----
-------------------
------
---- ----
---------- --------
------
--------
-------------- --------
-
-- 处理 RESTful API 的响应
在发送 RESTful API 请求后，服务器将会返回一些响应数据。这些数据有可能是 JSON 格式或者 XML 格式等各种类型。在 AngularJS 中，我们可以通过指定 responseType 参数来告诉 $http 如何处理响应数据。下面是一些可能的取值：
- responseType = 'json'：返回 JSON 数据类型；
- responseType = 'text'：返回纯文本数据类型；
- responseType = 'document'：返回 HTML 文档数据类型；
- responseType = 'arraybuffer'：返回 ArrayBuffer 类型。
示例代码如下：
-- -------------------- ---- ------- -- -- ------------ ------- ------- ------- ------ ---- ------------ ------------- ------ ---------------- ------------------------- - -- --------- --------------------------- -- -------- ----------------------- - -- --------- --------------------------------- ---
- 封装请求到 Service 服务中
一个更好的实践是将请求封装到 Service 服务中，这样有助于组织代码和保持代码的干净整洁。示例代码如下：
-- -------------------- ---- -------
-- ---- -------
-------------------------- --------------- -
--- ------- - ---
-------------- - ---------- -
------ -------
------- ------
---- ------------
------------- ------
---
--
--------------- - ------------ -
------ -------
------- ------
---- ------------ - ---
------------- ------
---
--
------ --------
---
-- ----------
-------------------------------- ---------------- ------------ -
-------------------------------------------- -
-- -----------
------------ - --------------
---
---在这个示例代码中，我们创建了一个名为 UserService 的 Service 服务，通过 getAll() 和 getById() 方法来封装对 RESTful API 的请求。在 Controller 中，我们通过调用 UserService 获取到所有用户列表，并将其绑定到 $scope 上。
总结
在本文中，我们详细讨论了如何在 AngularJS 中通过 $http 服务调用 RESTful API，以及一些最佳实践。虽然这些示例代码看起来很简单，但它们展示了一些非常实用的技巧，有助于你写出更清晰、更高效、更健壮的代码。了解这些技巧是成为一名优秀的前端工程师的必要条件之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653fac717d4982a6eb93b418