AngularJS“不能读取属性‘然后’未定义”

Question

我有这个问题，当我登录按钮点击，铬控制台日志中：

angular.min.js:117 TypeError: Cannot read property 'then' of undefined at m.$scope.logIn (loginModuleController.js:11)

服务：

angular.module('loginModule') 
.factory('loginService', function($http){ 
    return{ 
    login: function(username, password){ 
     var session; 
     $http.post('../server/php/auth/auth.php', { 
     username: username, 
     password: password 
     }) 
     .then(function(res){ 
     session = res; 
     }); 
     return session; 
    }, 
    isLogged: function(){ 
     return $http.get('../angCMS/server/php/auth.php?is_logged=true'); 
    }, 
    logOut: function(){ 
     return $http.get('../angCMS/server/php/auth.php?logout=true'); 
    } 
    }; 
}); 

控制器：

angular.module('loginModule') 
.controller('LoginCtrl', ['$scope', 'loginService', function($scope, loginService){ 

    $scope.auth = false; 

    $scope.username; 
    $scope.password; 
    $scope.logIn = function(){ 
    loginService.login($scope.username, $scope.password).then(function(response){ 

    }, function(res){ 

    }); 
    }; 

    $scope.isLogged = function(){ 
    loginService.isLogged() 
    .then(function(response){ 
     if(response){ 
     $scope.auth = true; 
     } 
    }); 
    }; 

    $scope.logOut = function(){ 
    loginService.logOut() 
    .then(function(response){ 
     if(response){ 
     $scope.auth = false; 
     } 
    }); 
    }; 

}]); 

，这是HTML模板：

<div class="container" ng-if="auth==false"> 
    <div class="col-md-4 col-md-offset-4"> 
    <div class="row"> 
     <br/><h2 align="center">Login</h2> 
    </div> 
    <div class="well"> 
     <form class="form-horizontal"> 
     <fieldset> 
      <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Username" ng-model="username" required> 
      </div> 
      <div class="form-group"> 
       <input type="password" class="form-control" placeholder="Password" ng-model="password" required> 
      </div> 
      <div class="form-group"> 
       <button class="btn btn-md btn-primary btn-block" type="submit" ng-click="logIn()">Sign in</button> 
      </div> 
     </fieldset> 
     </div> 
    </form> 
    </div> 
</div> 

PHP登录方法：

public function login($user, $pass){ 

     $user = htmlspecialchars(trim($user)); 
     $pass = md5(htmlspecialchars(trim($pass))); 

     $res = $this->DB->prepare("SELECT * FROM `admin` WHERE username = :user"); 
     if(!$res->execute(Array(":user"=>$user))) 
      die(mysql_error()); 

     $row = $res->fetch(PDO::FETCH_ASSOC); 

     if(!$row['password'] == $pass) 
      die("Errore: password errata!"); 

     $_SESSION['logged'] = $row; 
     array_push($session, $_SESSION['logged'], true); 

     return $session; 
    } 

Answer 1

这更多的是对承诺问题的误用。

你可能想先看看的承诺是如何工作的：

• https://docs.angularjs.org/api/ng/service/ $ Q
• https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise

从您的服务代码：

login: function(username, password){ 
    var session; 
    $http.post('../server/php/auth/auth.php', { 
    username: username, 
    password: password 
    }) 
    .then(function(res){ 
    session = res; 
    }); 
    return session; 
} 

当login(username, password)被调用，会话仍然是undefined返回。

这是因为$http.post()是异步函数，.then()子句不会立即执行。

正如指出的Snixtor's answer， 你应该 “回归的$http.post()返回值”：

login: function(username, password){ 
    return $http.post('../server/php/auth/auth.php', { 
    username: username, 
    password: password 
    }); 
} 

然后参照您的控制器的登录方法：

$scope.logIn = function(){ 
    loginService.login($scope.username, $scope.password).then(function(response){ 
    // response === 'session' 
    }, function(res){ 

    }); 
}; 

从loginService.login().then()的response参数恰好是您之前实施中预期的session变量的值。

Answer 2

你返回名为 “会话” 的未赋值的变量。所以你在这里登录的方法正在返回undefined。未定义的没有一个叫做then的方法。

login: function(username, password){ 
     var session; 
     $http.post('../server/php/auth/auth.php', { 
     username: username, 
     password: password 
     }) 
     .then(function(res){ 
     session = res; 
     }); 
     return session; 
    }, 

我的猜测是你实际上想返回$ http.post方法，这反过来返回一个承诺。这样你可以在控制器中使用会话？

Answer 3

您的服务功能login未能将呼叫创建的承诺返还给$http.post。相反，你需要这个：

login: function(username, password){ 
    return $http.post('../server/php/auth/auth.php', { 
    username: username, 
    password: password 
    }); 
} 

请注意，我已经从函数中删除了session变量。这是控制器中需要处理响应的then函数。

您的isLogged和logOut功能已经很好看了。只需重复该模式即可。