Angular js .then不是一个函数

时间:2015-12-16 14:16:19

标签: javascript angularjs

我有这个加载数据的服务..

 angular.module('App').service('daysService', ['$http','$q',function($http,$q) {

    var days = [];

      return {
                 loadDay: function() {
                    $http({
                    method: 'get',
                    url: '/app/days/list/',
                  }).success(function(data) {              
                    days.push(data);
                    return days;  
                  }).error(function (data) {
                      console.log('Error checking server.');
                  });
                }
            };

      }]);

比控制器中我调用服务

daysService.loadDay.then(function(data) {
   alert(data)
});

但我收到此错误TypeError: daysService.loadDay.then is not a function

有什么建议吗?

5 个答案:

答案 0 :(得分:3)

daysService.loadDay.then(function(data) {
   alert(data)
});

在第一行,您没有像正在将其作为属性访问它的函数调用loadDay。所以你需要把它改成这个:

 daysService.loadDay().then(function(data) {
   alert(data)
});

请注意loadDay上的括号。

其次,您正在使用像工厂这样的服务。所以你有两个选择:

angular.module('App').service('daysService', ['$http','$q',function($http,$q) {   
    var days = [];

    this.loadDay = function() {
                    $http({
                    method: 'get',
                    url: '/app/days/list/',
                  }).success(function(data) {              
                    days.push(data);
                    return days;  
                  }).error(function (data) {
                      console.log('Error checking server.');
                  });
                };
      }]);

OR

angular.module('App').factory('daysService', ['$http','$q',function($http,$q) {
  var days = [];

  return {
             loadDay: function() {
                $http({
                method: 'get',
                url: '/app/days/list/',
              }).success(function(data) {              
                days.push(data);
                return days;  
              }).error(function (data) {
                  console.log('Error checking server.');
              });
            }
        };

  }]);

最后,您不会从函数中返回承诺:

function() {
    return $http({
        method: 'get',
        url: '/app/days/list/',
    }).success(function(data) {
        days.push(data);
        return days;
    }).error(function(data) {
        console.log('Error checking server.');
    });
};

如果我这样做,我会这样做:

angular.module('App').factory('daysService', ['$http', '$q', function($http, $q) {
    var days = [];

    this.loadDay = function() {
        return $http.get('/app/days/list/').then(
            function(data) {
              days.push(data);
              return days;
            },
            function(data) {
              console.log('Error checking server.');
            }
        );
    };
}]);

答案 1 :(得分:3)

您没有从loadDay函数返回任何内容。试试这个:

return {
    loadDay: function() {
        return $http({   // <-- return the promise
            method: 'get',
            url: '/app/days/list/',
        }).success(function(data) {              
            days.push(data);
            return days;  
        }).error(function (data) {
            console.log('Error checking server.');
        });
    }
 };

答案 2 :(得分:1)

如果您想使用days,您的工厂应该返回承诺而不是.then()。我相信您可以执行类似return $q.when(days)而不是return days的操作,这应该有用。

另外请注意,自{Angular 1.4}起,.success().failure()回调已被弃用。不确定您正在使用哪个版本,但$http现在使用.then遵循此模式:

$http({stuff}).then(function successCallback(response) {
    //success
  }, function errorCallback(response) {
    // error
  });

答案 3 :(得分:0)

 angular.module('App').service('daysService', ['$http','$q',function($http,$q) {

var days = [];

  return {
             loadDay: function() {
                $http({
                method: 'get',
                url: '/app/days/list/',
              }).success(function(data) {              
                days.push(data);
                //return days;  
              }).error(function (data) {
                  console.log('Error checking server.');
              });
            },getDays: function(){ return days; }

        };

  }]);
daysService.loadDay(); $window.alert(daysService.getDays());

答案 4 :(得分:0)

如果您仅创建承诺,则可以将其与.then()一起使用。查看此文档,了解如何创建承诺。很简单。 https://docs.angularjs.org/api/ng/service/$q

您的代码现在无法使用.then()且对象/对象属性不存在,因此错误TypeError: daysService.loadDay.then is not a function。否则编写一个代码,不需要您使用.then(),但可以作为正常触发的函数。那也行。

/* In your service  */
angular.module('App').factory('daysService', ['$http',function($http) {

    var days = [];

      return {
                 loadDay: function() {
                    $http({
                    method: 'get',
                    url: '/app/days/list/',
                  }).success(function(data) {              
                    days.push(data);
                    return days;  
                  }).error(function (data) {
                      console.log('Error checking server.');
                      return;
                  });
                }
            };

      }]);

/* In your controller trigger the eventorclick */
$scope.trigger = function(){
$scope.modelname = daysService.loadDay(); /* returns days else undefined or null */
alert($scope.modelname); /* handle your issues if you have array of objects */
}