Question

我正在使用Angularjs和typescript将一些REST方法外包给工厂。该工厂应由不同的控制器使用。所以我有一个简单的网页，一个控制器和一个我想使用的工厂：

以下是控制器的代码：

/// <reference path="../scripts/typescript/angular.d.ts" />
/// <reference path="../scripts/app.ts" />
/// <reference path="ServiceHttp.ts" />
module nawApp {
   export interface IStundentScope extends ng.IScope {
      fullname: string;
   }
   export class StudentUse {
      private ServiceHttp: any;
      constructor($scope: IStundentScope, ServiceHttp: nawApp.ServiceHttp, $http: ng.IHttpService) {
         this.ServiceHttp = ServiceHttp;
         $scope.fullname = ServiceHttp.exampleFunction();
      }

   }
   StudentUse.$inject = ['$scope', 'ServiceHttp', '$http'];
   nawApp.app.controller('StudentUse', StudentUse);
}

这是我的工厂：

/// <reference path="../scripts/typescript/angular.d.ts" />
/// <reference path="../scripts/app.ts" />
module nawApp {
   export class ServiceHttp {
      private http: any;
      constructor(public  $http: any) {
         this.http = $http;
     }
      public exampleFunction():string {
         this.http.get(mainUrl.toString() + 'EventLog').success(function (data, status, headers, config) {
            try {
               return data;
            }
            catch (err) {
               return "Hello Error";
            }
         }).error(function (data, status, headers, config) {
               return "Hello Error 2";
            });
         return "Hello Error 3";
      }
      static Factory($http: ng.IHttpService) {
         return new ServiceHttp($http);
      }
   }
   ServiceHttp.$inject = ['$http'];
   nawApp.app.factory('ServiceHttp', nawApp.ServiceHttp.Factory);
}

我调试了代码，工厂（$ http：ng.IHttpService）... 部分是使用 ServiceHttp.exampleFunction（）执行的，但字符串<返回strong> Hello Error 3 ，而不是返回数据; 部分。如果我只是将HTTP.Get的东西复制到我的控制器，一切都很好。我认为我打电话给工厂的方式存在问题。

你能帮帮我吗？感谢!!!

Answer 1

您实际上只能从$http返回链式响应：

module nawApp
{
    export class ServiceHttp
    {
        private http: any;
        constructor(public $http: ng.IHttpService, public $q: ng.IQService){
            this.http = $http;
        }
        public exampleFunction(): ng.IPromise<string>{

            return this.http.get(mainUrl.toString() + 'EventLog').success(function (data, status, headers, config){
                return data.SomeStringProperty;
            }).error(function (data, status, headers, config){
                throw new Error('Custom error message');
            });
        }

        static Factory($http: ng.IHttpService){
            return new ServiceHttp($http);
        }
    }
    ServiceHttp.$inject = ['$http', '$q'];
    nawApp.app.factory('ServiceHttp', nawApp.ServiceHttp.Factory);
}

请注意，不必要地使用deferred是一种糟糕的模式：https://github.com/petkaantonov/bluebird/wiki/Promise-anti-patterns#the-deferred-anti-pattern

Answer 2

您必须从exampleFunction函数返回一个承诺而不是字符串。然后，根据HTTP调用的结果，您可以解析或拒绝承诺。 Key是函数的返回值，应为ng.IPromise<string>。另请注意，您可以对ng.IHttpService服务使用$http类型，而不仅仅使用any。

服务可能看起来像那样：

module nawApp
{
    export class ServiceHttp
    {
        private http: any;
        constructor(public $http: ng.IHttpService){
            this.http = $http;
        }
        public exampleFunction(): ng.IPromise<string>{

            return this.http.get(mainUrl.toString() + 'EventLog').success(function (data, status, headers, config){
               return data;
            }).error(function (data, status, headers, config){
               throw new Error("Error");
            });
        }

        static Factory($http: ng.IHttpService){
            return new ServiceHttp($http);
        }
    }
    ServiceHttp.$inject = ['$http'];
    nawApp.app.factory('ServiceHttp', nawApp.ServiceHttp.Factory);
}

消费方法也有所不同。它看起来像这样：

serviceHttp.exampleFunction()    
    .then(function (result) {
        console.log(result);        
      }, function() {
        console.log("error");
      });       
    };

您可以在此处详细了解承诺：https://docs.angularjs.org/api/ng/service/$q

Angularjs和Typescript - 打电话给工厂

2 个答案: