Question

我尝试使用$http作为依赖注入来接收数据，然后使用angular $q服务将该数据分配给承诺。我做错了什么......似乎找不到位置。

服务：

myApp.factory('githubApi', ['$http', '$q',
    function($http, $q) {
        var deferred = $q.defer();
        //Declaring a promise that will or will not return a users github information.
        this.accountInformation = function (){
            return $http.get('https://api.github.com/users/joshspears3')
            .then(function(response){
                deferred.resolve(response);
                return deferred.promise;
            }, function(response){
                deferred.reject(response);
                return deferred.promise;
            })
        }
    }
]);

控制器：

myApp.controller('githubCtrl', [ 'githubApi', '$q', '$scope',
    function(githubApi, $q, $scope){
        githubApi.accountInformation()
        .then(
            function (result) {
                $scope.data = result;
            }, function (error) {
                // handle errors here
                console.log(error.statusText);
            }
        );
    }
]);

指令：

myApp.directive('githubRequest', [
    function() {
        return {
            scope: {},
            restrict: 'E',
            controller: 'githubCtrl',
            templateUrl: 'public/views/partials/github-request.html'
        }
    }
]);

部分（github-request.html）：

<p class="component-example-header">Creating a service. Making a $http request to grab my personal Github information.</p>
<div class="service-message">
    <p>Avatar:</p>
    <img width="20%" src="{{data.avatar_url}}" alt="" />
    <p>Username: <span ng-bind="data.login"></span></p>
    <p>Followers: <span ng-bind="data.followers"></span>, Following: <span ng-bind="data.following"></span></p>
</div>
<hr>

这是浏览器投掷的错误：

Error: [$injector:undef] http://errors.angularjs.org/1.4.4/$injector/undef?p0=githubApi
    at Error (native)
    at http://localhost:9999/bower_components/angular/angular.min.js:6:416
    at Object.$get (http://localhost:9999/bower_components/angular/angular.min.js:37:32)
    at Object.e [as invoke] (http://localhost:9999/bower_components/angular/angular.min.js:39:96)
    at http://localhost:9999/bower_components/angular/angular.min.js:40:410
    at d (http://localhost:9999/bower_components/angular/angular.min.js:38:308)
    at Object.e [as invoke] (http://localhost:9999/bower_components/angular/angular.min.js:39:64)
    at Q.instance (http://localhost:9999/bower_components/angular/angular.min.js:80:151)
    at K (http://localhost:9999/bower_components/angular/angular.min.js:61:140)
    at http://localhost:9999/bower_components/angular/angular.min.js:68:475

当我将githubApi服务注入可能是我的控制器的依赖项时，它是不确定的？

Answer 1

我认为因为你的工厂没有返回任何东西

myApp.factory('githubApi', ['$http', '$q',
    function($http, $q) {
       return {
          accountInformation: function (){
            var deferred = $q.defer();
            $http.get('https://api.github.com/users/joshspears3')
            .then(function(response){
                deferred.resolve(response);
            }, function(response){
                deferred.reject(response);
            })
            return deferred.promise;
          }
       }
    }
]);

是我通常拥有的方式

Answer 2

您应该在服务方法中返回promise，并且延迟对象应该在方法内部，服务应该返回一个对象：

myApp.factory('githubApi', ['$http', '$q',
    function($http, $q) {
        //Declaring a promise that will or will not return a users github information.
        return {
            accountInformation: function () {
                var deferred = $q.defer();
                $http.get('https://api.github.com/users/joshspears3')
                    .then(function(response){
                        deferred.resolve(response);
                    }, function(response){
                        deferred.reject(response);
                    });
                return deferred.promise;
            }
        }
    }
]);

您也可以简化此操作，因为$http服务已经返回了承诺：

myApp.factory('githubApi', ['$http',
    function($http) {
        //Declaring a promise that will or will not return a users github information.
        return {
            accountInformation: function () {
                return $http.get('https://api.github.com/users/joshspears3');
            }
        }
    }
]);

Answer 3

首先，$http.get已经返回$q承诺，不需要再次将其包含在承诺中。

其次，工厂创建一个共享服务的单个实例。因此，工厂的方法应该返回该对象。在工厂函数本身中为此分配任何内容都不会公开该方法/属性：

myApp.factory('githubApi', ['$http', function ($http) {
    var githubApi = {
      accountInformation: function () {
          return $http.get('https://api.github.com/users/joshspears3');
      }
    };
    return githubApi;
}

角度服务导致错误

3 个答案: