在前端开发中,与外部 API 交互是非常常见的操作。AngularJS 提供了 $http
服务来发送 HTTP 请求,并在处理响应时提供了丰富的选项。
使用 $http.get
要发送 GET 请求,我们可以直接调用 $http.get(url)
方法,其中 url
是我们要请求的 API 地址。下面是一个简单的示例:
--------------------------------------------------------- ------------------------ - --------------------------- ---
该代码将请求一个 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