Angular REST客户端ngResource无法获取json

Posted 2023-03-04

【中文标题】Angular REST客户端ngResource无法获取json

【英文标题】：Angular REST client ngResource can't get json

【发布时间】：2016-03-16 15:31:38

【问题描述】：

我有一个带有 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

【问题讨论】：

开发者工具的网络标签是什么意思？我会查看您收到的原始回复

【参考方案1】：

你需要解决你用Plug.query()创建的promise

试试这个：

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

更多信息可以在 angularjs.org 上的文档中找到：

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

【讨论】：

我在控制台出现这个错误：Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8003/api/plugs. (Reason: CORS header 'Access-Control-Allow-Origin' missing).whats I can do?

这意味着您必须从服务 API 的后端发送 CORS 标头。看看这个：***.com/questions/10636611/…

【参考方案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

【讨论】：

我在控制台出现这个错误：Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8003/api/plugs. (Reason: CORS header 'Access-Control-Allow-Origin' missing).whats I can do?

【参考方案3】：

看来你在那里有一个承诺。

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

试试

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

【参考方案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
    );