Question

我正在尝试使用Angularjs从TVRage使用此Web服务（http://services.tvrage.com/feeds/show_list.php）。

我可以'连接'到该服务（使用firebug我看到GET show_list.php状态200 OK）但是当我尝试从响应中打印任何数据时我得不到。

这是我使用的代码：

var TV_Episodes = angular.module('TV_Episodes', ['ngResource']);

TV_Episodes.controller('GetAllEpisodes', function($scope, $resource) {
    var dataService = $resource('http://services.tvrage.com/feeds/show_list.php');
    $scope.data = dataService.get();
    console.log($scope.data());
});

关于我如何才能将console.log作为回应的任何想法？

更新1：

经过一些尝试后，我发现我得到了以下错误作为TVRAGE的回复。

“XMLHttpRequest无法加载http://services.tvrage.com/feeds/show_list.php。请求的资源上没有'Access-Control-Allow-Origin'标头。因此不允许原点”http://localhost“访问。”

因此我调整了我的代码

var dataService = $resource('http://services.tvrage.com/feeds/show_list.php?key=xxxx',{},{headers: { 'Access-Control-Allow-Origin': '*' }});

但我仍然得到与以前相同的错误。

Answer 1

$resource.get()返回一个promise，这意味着您可能会在检索数据之前打印到控制台。而是使用适当的回调函数：

$scope.data = dataService.get(function() { console.log($scope.data); });

Answer 2

get 方法是异步的。当它被调用时，它立即返回一个对象（或数组，如果指定 - 但不是MWay的答案中指出的承诺）。然后，稍后，使用成功从服务器返回的数据更新相同的引用。这是文档中的relevant part：

重要的是要意识到调用$ resource对象方法会立即返回一个空引用（对象或数组，具体取决于isArray）。从服务器返回数据后，将使用实际数据填充现有引用。这是一个有用的技巧，因为通常将资源分配给模型，然后由视图呈现。具有空对象导致无渲染，一旦数据从服务器到达，则对象用数据填充，并且视图自动重新呈现其自身显示新数据。这意味着在大多数情况下，永远不必为动作方法编写回调函数。

与请求一样快，直到事件循环再次出现才会解决。该资源设计有助于让您免于编写回调。但是，如果需要， get 方法将获取将在请求解析且数据准备就绪时调用的回调函数参数。

var TV_Episodes = angular.module('TV_Episodes', ['ngResource']);

TV_Episodes.controller('GetAllEpisodes', function($scope, $resource) {
    var dataService = $resource('http://services.tvrage.com/feeds/show_list.php');
    $scope.data = dataService.get(function () {
        console.log($scope.data());
    });
});

或者，您可以使用* $ promise“访问用于处理请求的 promise ，这是从 get 返回的空实例对象的属性。

TVRage通过AngularJS消费服务

2 个答案: