使用 Angular 从 API 获取 JSON 数据

Question

我试图通过以下地址http://www.soe.gr/photos.txt获取一些 JSON 数据，该地址是通过使用以下 Angular 代码使用Flickr API创建的：

angular.module('myapp', ['ngResource']).
controller('MyController', ['$scope', '$resource', function ($scope,$resource) {
    $scope.photoAPI = $resource("http://www.soe.gr/photos.txt",
{ callback: "JSON_CALLBACK" }, { get: { method: "JSONP" }});
$scope.photos=$scope.photoAPI.get();
}]);

我正在使用$resource作为不被阻止，因为我试图从另一个域获取数据。 但是，我收到以下错误： Uncaught ReferenceError: jsonFlickrFeed is not defined 。

• 我的第一个问题是这种类型到底是什么： jsonFlickrFeed({...})
• 我的第二个问题当然是，如何将上述 JSON 对象的items属性放入我的 $scope 中，以便操作它们并继续我的代码，因为我被卡住了！ 谢谢

Answer 1

$resource 用于处理 REST API，即使它可能使用 jsonp 重新定义 get 方法它没有用，最好使用 $http 来做到这一点：

  var url = "http://www.soe.gr/photos.txt?callback=JSON_CALLBACK";
  $http.jsonp(url).then(function(response) {
    console.log(response.data);
  });

什么是 JSONP： https : //en.wikipedia.org/wiki/JSONP

JSONP（带填充的 JSON）是 Web 开发人员用来克服浏览器强加的跨域限制的一种技术，以允许从提供页面的系统以外的系统检索数据。

它的主要观点不是加载 JSON 数据，而是加载脚本，您可以在其中看到使用 json 数据作为参数的函数调用 - 在您的文件中，您可以看到 jsonFlickrFeed({...})。 但该功能需要存在。 在 AngularJS 应用程序中，angular 透明地为您提供它并将其生成的名称发送到请求的脚本而不是参数中的 JSON_CALLBACK。

但是在这里您的端点可能只是静态文件而不是脚本，它可以通过给定的自定义回调函数提供 JSONP 响应。

你可以在这里看到它的工作 - http://jsbin.com/becufenepo/edit?js,console

它的 url 包含参数 jsoncallback=JSON_CALLBACK，angular 发送生成的名称，在网络控制台中你可以看到请求

https://www.flickr.com/services/rest/ ... &jsoncallback=angular.callbacks._0

然后它的响应包含调用angular.callbacks._0({})函数

就是这样，主要原因是您的终端无法提供 jsonp。