AngularJS - 无法使用工厂调用 http 服务答案

【问题标题】：AngularJS - Unable to call http serrvice using factoryAngularJS - 无法使用工厂调用 http 服务
【发布时间】：2016-10-22 19:31:17
【问题描述】：

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

角度代码

 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天，但仍然不知道为什么它不起作用。

【问题讨论】：

您是否在控制台中看到任何错误？
嗨@Sajeetharan，我看不到任何错误，它说“HTML1300：发生导航”。仅限。
您的 getData 方法没有多大意义。 $http() 返回一个承诺，当您收到响应时将解决该承诺。它的异步调用。因此，在任何情况下，从获取数据中您都会返回“无数据”。当响应到来时，您只需在回调中处理它，但之后没有任何东西使用它。
在提琴手上，当我点击 url 时，它会向我展示 JSON 对象。

标签： javascript angularjs angularjs-service angularjs-factory

【解决方案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;
            });

【讨论】：

非常感谢@Vladimir。我得到了你的解释和它现在的工作:)

【解决方案2】：

首先，您缺少ng-app 声明

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

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

请参阅有关 promises 的文档

最后，您正在处理 Promise 和异步代码，但返回的是响应或字符串，而不是带有结果的 Promise。所以 getData() 应该是这样的：

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

在控制器中使用 then(success,error,finally) 回调，或者如果你想在服务中提供错误/finally 回调的值，你应该使用 $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 服务

【讨论】：

感谢您的回复朋友，问题出在异步调用上，Vladimir 在我的最后提供了解决方案及其工作正常。
我提供的 HTML 只是页面的一部分。谢谢