Question

我有Flask的简单RESTful服务器，我喜欢使用ngResource创建一个AngularJS的简单客户端。这个想法是对服务器进行GET，并获取一个json文件。

这是我的services.js

var IpZapServices = angular.module('IpZapServices', ['ngResource']);
IpZapServices.factory('Plug', ['$resource', function($resource) {
    return $resource('http://localhost:8003/api/plugs/:id',
             {id : "@id"}, {
                 query: {method: 'GET', params: {}, isArray: false}
           });
}]);

controllers.js

var IpZapControllers = angular.module('IpZapControllers', []);
IpZapControllers.controller('PlugListCtrl', ['$scope', 'Plug', function($scope, Plug) {
    $scope.plugs = Plug.query();
    console.log($scope.plugs);
}]);

但是，我没有得到json文件，得到这个：

Object { $promise: Object, $resolved: false }

为什么呢？我做错了什么？谢谢！

修改

这是我从服务器收到的原始回复。

{"plugs": [
    {"alarm": [],
     "id": 0,
     "name": "Plug 0",
     "state": false},
    .
    .
    .
    {"alarm": [],
     "id": 3,
     "name": "Plug 3",
     "state": false}
]}

编辑2：解决方案

问题出在服务器上。只需添加到服务器Flask-CORS并工作！

from flask.ext.cors import CORS
app = Flask(__name__)
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})

解决方案来自this question

Answer 1

您需要解决使用Plug.query()

创建的承诺

试试这个：

Plug.query().$promise.then(function (response) {
     console.log(response)
     $scope.plugs = response;
});

有关这方面的更多信息，请参阅angularjs.org上的文档：

https://docs.angularjs.org/api/ngResource/service/$resource

Answer 2

试试这个：

var IpZapControllers = angular.module('IpZapControllers', []);
IpZapControllers.controller('PlugListCtrl', ['$scope', 'Plug', function($scope, Plug) {
  $scope.plugs = Plug.query();
  $scope.plugs.$promise.then(function (result) {
      console.log(result);
      $scope.plugs = result;
  });
}]);

说明：

您对query的来电不会立即返回数据。它会返回一个promise对象，一旦HTTP请求完成，它将最终获取您的数据（注意控制台消息说resolved: false）。

阅读更多：

Promises in AngularJS, Explained as a Cartoon

Answer 3

似乎你在那里有一个承诺。

不要分配函数的返回值，需要等到promise解析或拒绝

尝试

Plug.query().$promise
    .then(function (response) {
         // success code here
     }) 
    .catch(function (err) {})

Answer 4

当从控制器连接到webapi时，使用方法调用中的成功和错误承诺。

Ctrl.$inject = ["$scope", "Service"];
function Ctrl($scope, Service) {

    Service.getJson().success(function (data) {
        $scope.json = data;
    })
    .error(function (data) {
        // data should show the error
    });
}

Angular REST客户端ngResource无法获取json

4 个答案: