javascript - 来自 Controller 的 AngularJS 服务调用不起作用

Question

我想从 Controller 调用服务来登录用户。为了测试一般概念，此时的服务应该只返回一个带有一些模拟数据的 JSON 对象。

如果我按下登录按钮，我会收到如下错误消息:

Error: loginService.loginTest(...).then is not a function
$scope.login@http://localhost/Clickstar/app/controller/loginController.js:15:3
Wa.prototype.functionCall/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:162:24
Mc[c]</<.compile/</</<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:178:390
zd/this.$get</h.prototype.$eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:101:141
zd/this.$get</h.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:101:418
Mc[c]</<.compile/</<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:178:370
Xc/c/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:27:145
q@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:7:378
Xc/c@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:27:129
 angular.min.js:84:35

这是我的代码

login.html

<div>   

    <div>
      <form method="post" ng-submit="login()">
            <input name="username" type="text" ng-model="username" placeholder="username"><br>
            <input name="password" type="password" ng-model="password" placeholder="password"><br>
            <input type="submit" value="Login" class="center-button">
        </form>
    </div>

    <div ng-show="Login.success">
            Username: {{Login.loginUsername}} <br>
            Password: {{Login.loginPassword}} <br>
            UserID: {{Login.usernID}} <br>


    </div>  


</div>

loginService.js

app.service('loginService', function($http, $q) {


    this.loginTest = function(username, password)
    {

        var dummyData = {   "username" : username,
                            "password" : password,
                            "userID" : 007,
                            "loginStatus" : 1
        };

        return dummyData;

    };

    return this;

});

loginController.js

app.controller('loginController', function ($scope, loginService) {   

    var vm = this;
    vm.loginUsername = null;
    vm.loginPassword = null;
    vm.usernID = null;
    vm.success = null;


    $scope.login = function(){
        vm.loginUsername = $scope.username;
        vm.loginPassword = $scope.password;


        loginService.loginTest($scope.username, $scope.password)
        .then(function(dummyData){

            vm.loginUsername = dummyData.username;
            vm.loginPassword = dummyData.password;
            vm.usernID = dummyData.userID;

            if(dummyData.loginStatus == 1){
                vm.success = true;
            }
            else{
                vm.success = false;
            }
        })

    };
});

那么我的代码有什么问题以及如何修复它？

Answer 1

问题是您的模拟登录服务器没有返回 promise ，这是您在 Controller 中所期望的。

您可以更改您的 loginTest 方法，以通过执行以下操作来返回 promise :

return $q(function(resolve, reject) {
  resolve(dummyData);
});

我想指出，您的登录服务正在返回用户名和密码，这似乎是不必要的，您实际上应该向服务器发出请求，该请求会通知您用户名/密码是否有效。您可以模拟执行此操作的服务，如下所示:

app.service('loginService', function($http, $q) {

  var dummyData = {
    "username": username,
    "password": password,
    "userID": 007,
    "loginStatus": 1
  };

  this.loginTest = function(username, password) {
    return $q(function(resolve, reject) {
      if (username === dummyData.username && password === dummyData.password) {
        resolve({
          userId: dummyData.userID,
          loginStatus: dummyData.loginStatus
        });
      } else {
        reject("Incorrect username or password");
      }
    });
  };

  return this;

});

注意 - 如果不支持 es6

如果您要将其部署到不支持 ES6 的浏览器，那么您需要使用延迟 API。

var deferred = $q.defer();
deferred.resolve(someData);
return deferred.promise;

同义于

return $q(function(resolve, reject) { resolve(someData); }