Question

要解决我的问题，我已经浏览了不同网站上的很多文章，但没有解决它。我正在编写一个简单的AngularJS应用程序。我对Angular很新。我编写了一个调用$ http服务的工厂方法，该服务从web api获取数据。 Web api运行正常，并按预期返回JSON对象。

Angular Code

 var app = angular.module("app", [])
            .controller("controller", function ($scope, WebFactory) {
                $scope.data = "data";
                $scope.error = "error";
                $scope.data=WebFactory.getData();

            })
            .factory("WebFactory", function ($http) {
                var obj = {};

                obj.getData = function()
                {
                    $http({
                        method: "GET",
                        url: "http://localhost:37103/api/employee",                      
                    }).then(function success(response) {
                        return response.data;
                    })
                    .then(function error(response) {
                        return response;
                    });
                    return 'No data';
                }
                return obj;

            });

HTML代码

 <body ng-controller="controller">

data: {{data}}
<br/>
error: {{error}}
<br />

我花了2天时间，但仍然不知道为什么它不起作用。

Answer 1

尝试这样的事情：

var app = angular.module("app", [])
            .controller("controller", function ($scope, WebFactory) {
                $scope.data = "data";
                $scope.error = "error";
                $scope.data = {}
                WebFactory.getData().then(function success(response) {
                        $scope.data = response.data;
                    });
            })
            .factory("WebFactory", function ($http) {
                var obj = {};

                obj.getData = function()
                {
                    return $http({
                        method: "GET",
                        url: "http://localhost:37103/api/employee",                      
                    })
                }
                return obj;
            });

Answer 2

首先，您错过了ng-app声明

其次，你滥用了当时的回调。它接受三个参数：成功回调，错误回调，最后回调。当第一个然后执行成功，然后它执行第二个回调，它总是返回响应，但我认为它不是那样的，你可以使用更容易使用的get函数。它应该是：

$http.get("http://localhost:37103/api/employee").then(function(response){
     //Do something with successfull response
 },
  function(error){ //do something with the error});

请参阅有关promises

的文档

最后，您正在处理promises和异步代码，但返回响应或字符串而不是结果的promise。所以getData（）应该如下所示：

obj.getData = function(){
   return    $http.get("http://localhost:37103/api/employee");
}

并在控制器中使用then（成功，错误，最后）回调，或者如果要在服务中提供错误/最终回调的值，则应使用$ q服务

obj.getData(){
 var deferred = $q.defer();
 $http.get(...).then(function(response){
      deferred.resolve(response.data);
   },
   function(error){
       deferred.reject("No Data");
   });
  return deferred.promise;
}

当然，您必须向WebFactory提供$ q服务

AngularJS - 无法使用工厂调用http serrvice

2 个答案: