使用 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。