Question

在我的研究中，我在这个OLD plunker中找到了这个article来通过工厂而不是我的控制器访问API。 plunker工作正常，但它正在访问本地JSON文件，而我将访问实时API提要。

我分叉并修改了代码以指向我在浏览器中测试的实时API Feed，并且URL上的Feed正在运行，但是plunker中的所有内容都是空白的。以下是我失败的步骤。

我修改了HTML以匹配API字段名称，如下所示：

<body ng-controller="MainCtrl">
    <h3>$scope.foo</h3>
    <ul>
      <li ng-repeat="item in foo">{{item.Zipcode}} - {{item.City}}</li>
    </ul>

    <h3>$scope.foo2</h3>
    <ul>
      <li ng-repeat="item in foo2">{{item.Zipcode}} - {{item.City}}</li>
    </ul>

    <h3>$scope.bar</h3>
    <ul>
      <li ng-repeat="item in bar">{{item.Zipcode}} - {{item.City}}</li>
    </ul>

    <br/>

    <h3>And here is what you get if you just return the promise returned by $http.get():</h3>
    <pre>{{test | json}}</pre>
  </body>

然后用URL代替服务中的本地JSON文件：

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope, myService) {

   //The clean way
   $scope.foo = myService.getFoo();

   //The "but I really like callbacks" way.
   myService.getFoo().then(function(data) {
      $scope.foo2 = data;
   });

   //The "common callback" pattern
   myService.getBar(function(data) {
      $scope.bar = data;
   });

   //So what happens if I just return 
   // whatever $http.get() returns?
   $scope.test = myService.testHttpGetResult();
});

app.factory('myService', function($http, $q) {
   return {
     getFoo: function() {
       var deferred = $q.defer();
       $http.get('http://gomashup.com/json.php?fds=geo/usa/zipcode/state/LA&jsoncallback=?').success(function(data) {
          deferred.resolve(data);
       }).error(function(){
          deferred.reject();
       });
       return deferred.promise;
     },
     getBar: function(callback) {
       $http.get('http://gomashup.com/json.php?fds=geo/usa/zipcode/state/LA&jsoncallback=?').success(callback);
     },
     testHttpGetResult: function (){
       return $http.get('http://gomashup.com/json.php?fds=geo/usa/zipcode/state/LA&jsoncallback=?');
     }
   }
});

现在没有数据。

这是我的分叉plunker。

访问实时API而不是本地JSON文件需要其他东西吗？

Answer 1

我修改了你的plunker，这是一个工作版本：

Plunker： http://plnkr.co/edit/bngUpRlV7OQjLzR4OKM1?p=preview

您遇到浏览器的跨域限制，通常不允许向具有不同域的网站发出ajax请求。

有两种常见的技术可以绕过限制，CORS和JSONP。

幸运的是，您正在使用的外部API已经具有JSONP支持，因此您可以像这样使用它：

getFoo: function() {
  return $http.jsonp('http://gomashup.com/json.php?fds=geo/usa/zipcode/state/LA&callback=JSON_CALLBACK')
              .then(function (resp) {
                return resp.data && resp.data.result;
              });
}

有三件事需要考虑：

要在角度中使用JSONP，网址必须采用以下格式：

http://gomashup.com/json.php?fds=geo/usa/zipcode/state/LA&callback=JSON_CALLBACK
结果数组实际位于resp.data.result中，或者如果您使用success()，则它位于data.result。
$http服务已经返回承诺，无需使用$q.defer()创建另一个承诺，您可以立即退回。

AngularJS：本地JSON文件在工厂工作，但实时API不起作用

1 个答案: