在前端开发中，与外部 API 交互是非常常见的操作。AngularJS 提供了 $http 服务来发送 HTTP 请求，并在处理响应时提供了丰富的选项。
使用 $http.get
要发送 GET 请求，我们可以直接调用 $http.get(url) 方法，其中 url 是我们要请求的 API 地址。下面是一个简单的示例：
$http.get('https://jsonplaceholder.typicode.com/posts/1')
.then(function(response) {
console.log(response.data);
});该代码将请求一个 JSON 数据，然后在控制台中打印出响应数据。
外部 API 调用
当我们调用外部 API 时，可能会遇到一些跨域问题。为了解决这个问题，需要设置 API 的响应头 Access-Control-Allow-Origin，并指定允许访问的域名或 IP 地址。
由于我们无法控制 API 的响应头，可以考虑使用 JSONP（JSON with Padding）技术，它利用了 HTML 的 <script> 标签可以跨域加载资源的特性。
在 AngularJS 中，可以通过添加一个参数 jsonp: 'callback' 来告诉 API 返回一个 JSONP 格式的响应，并指定回调函数的名称为 callback。然后使用 <script> 标签动态创建一个 URL 请求，指定该回调函数的名称。当 API 返回响应时，会调用该回调函数，并将数据作为参数传递给它。
下面是一个使用 JSONP 调用百度翻译 API 的示例：
-- -------------------- ---- -------
----------------------------------------------- -
------- -
------ --------
----- -----
--- -----
------ ------
----- -----
--
------ ----------
--
------------------------ -
---------------------------
---在上面的示例中，我们向百度翻译 API 发送了一个 JSONP 请求，请求参数包括要翻译的文本、源语言和目标语言等信息。注意需要替换 token 和 sign 参数为自己的值。
小结
- 在 AngularJS 中发送 HTTP GET 请求，使用
$http.get(url)方法。 - 对于跨域的外部 API 调用，可以考虑使用 JSONP 技术，通过指定回调函数名称来接收响应数据。
- 在 JSONP 请求中，需要在请求参数中添加一个
jsonp属性，并设置为'callback'。
希望这篇文章能够帮助你正确地使用 AngularJS 中的 $http.get 方法，并顺利地调用外部 API。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26172