在前端开发中，我们常常需要从服务器获取数据，这时候我们就需要使用 $http 服务来发送请求。$http 是 AngularJS 提供的一个服务，用于向服务器发送 HTTP 请求和处理响应数据。在本文中，我们将会介绍如何使用 $http 服务来调用外部 API。
什么是 $http 服务
$http 服务是 AngularJS 提供的一个 HTTP 客户端服务。它能够向服务器发送 GET、POST、PUT 和 DELETE 请求，并能够访问服务器返回的数据。$http 服务是 AngularJS 应用程序中处理 RESTful web services 的主要方式之一。
$http 服务提供了丰富的 API，让我们能够方便地对请求进行定制，包括设置请求头、请求数据、请求超时时间、请求拦截器等。此外，$http 服务还支持 Promise 和 $q，简化了异步处理的过程。
使用 $http 服务调用外部 API
我们可以使用 $http 服务来调用任何一个具有公共 API 的后端服务。首先，我们需要定义一个 service 服务来处理所有关于我们的 API 的请求。以下是一个使用 $http 服务的示例代码：
-- -------------------- ---- -------
-------------------------------- ---
----------------- --------- --------------- -
--- -------- - --------------------------
--- ----- - ---
-- ----
------------- - ---------- -
------ ------------------ - ---------
--
-- ----
---------------- - -------------- -
------ ------------------ - -------- ------
--
------ ------
----上述代码展示了如何使用 $http 服务从我们定义的 endpoint 连接获取数据。我们使用 AngularJS 的服务来创建一个名为 MyApi 的服务，该服务由一个名为 $http 的参数，用于调用 AngularJS 的 $http 服务。在 MyApi 服务中，我们定义了两个方法：getData 和 updateData。getData 方法是用来获取数据的，它向 endpoint 发送一个 GET 请求；updateData 方法是用来更新数据的，它向 endpoint 发送一个 PUT 请求。
这里有一些常用的方法来发送 HTTP 请求和接收响应：
-- -------------------- ---- ------- -- -- --- -- -------------- ----------------------------- --------------- -- -- ---- -- --------------- ----- ----------------------------- --------------- -- -- --- -- -------------- ----- ----------------------------- --------------- -- -- ------ -- ----------------- ----------------------------- ---------------
其中，url 是指请求的 URL；config 是指一个对象，包括请求头、请求体、请求超时时间等配置；data 是指一个对象或字符串作为请求的 body，它会被转换成 JSON 字符串或者 FormData。successCallback 和 errorCallback 是指成功或失败时的回调函数。
拦截器
$http 拦截器是 $http 服务中最强大的功能之一。它可以被用于处理所有 HTTP 请求和响应。我们可以使用拦截器来添加一个令牌到每个请求的头部，或者在响应到达应用程序之前拦截请求并做出更改。
以下是如何用拦截器将令牌放到 HTTP 请求中：
-- -------------------- ---- -------
-------------------------------- ---
----------------- --------- --------------- -
--- -------- - --------------------------
--- ----- - ---
------------------------------ ---------- -------- ---- -------- -
------ -
---------- -------- -------- -
-------------- - -------------- -- ---
-- ---------------------------- -
---------------------------- - ------- - - ---------------------------
-
------ -------
-
--
----
-- ----
------------- - ---------- -
------ ------------------ - ---------
--
-- ----
---------------- - -------------- -
------ ------------------ - -------- ------
--
------ ------
----上述代码中，我们使用了一个拦截器来添加一个令牌到 HTTP 请求中。我们使用 $http 拦截器的 push 方法来添加它。当我们发送 HTTP 请求时，拦截器会拦截请求并将令牌添加到请求的头部中。
总结
在本文中，我们介绍了使用 $http 服务来调用外部 API 的方法。我们定义了一个 service 服务来处理所有关于我们的 API 的请求，使用了 $http 服务来发送 HTTP 请求和接收响应。我们还介绍了拦截器的概念，及如何使用拦截器在每个请求中添加一个令牌。希望这篇文章能够对你的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cf06a1b5eee0b525683f2c