javascript - 返回 bool 值的 Angularjs 自定义服务方法

Question

我的一个 Controller 在与 Angularjs 中的一项服务通信时出现问题:

1. 用户输入代码；
2. Controller 获取输入的代码并将其传递给我的自定义服务，以通过名为 IsCodeValid 的方法了解代码是否有效；
3. 该服务方法调用 Web API 方法，如果代码有效，则返回 true，否则返回 false；
4. 服务方法返回 Web API 调用的结果(如果有效则为 true；否则为 false)；

这是我的 Controller (部分):

angular.module('clockin').controller('KeypadController', ['$scope', '$location', 'userService',
        function ($scope, $location, userService) {

            ...

            $scope.keypadEnter = function () {
                var result = userService.isCodeValid($scope.code);
                console.log(result);
            };

            ...
  }]);

这是我的服务:

angular.module('clockin').service('userService', ['$http',
    function ($http) {
        this.isCodeValid = function (code) {
            $http.get("/api/clockin/iscodevalid?code=" + code)
                .then(function (result) {
                    return result;
            });
        }
    }
]);

我的 Web API 方法运行良好。如果我手动调用它并指定一个有效的代码作为 URL 的参数，它会按预期返回 true。

然而，即使输入了有效的代码， Controller 也始终会得到错误的结果。

我错过了什么？

Answer 1

$http.get cal 是异步调用。所以你不会得到这样的预期结果。

$http.get 调用返回一个 promise ，该 promise 在解析时调用您在 then 方法中指定的回调函数。

解决方案:

在您的服务方法中返回这样的 promise 对象

angular.module('clockin')
  .service('userService', ['$http', function ($http) {
    this.isCodeValid = function (code) {
      return $http.get("/api/clockin/iscodevalid?code=" + code);
    };
  }]);

在您的 Controller 中等待 promise 得到解决以获得结果

$scope.populatekeypadEnter = function () {
  var result = userService.isCodeValid($scope.code)
    .then(function (result) {
      $scope.keypadEnter = result;
    });                
};

您还可以使用 .success 函数代替 then 来注册回调方法。您可以引用这个链接:https://docs.angularjs.org/api/ng/service/ $http