AngularJS:试图使用一个服务，得到错误"无法读取属性'那么'“未定义”;

AngularJS: Trying to use a service, get error "cannot read property 'then' of undefined"

本文关键字：未定义 错误 quot 属性 那么 读取 服务 一个 AngularJS      更新时间：2023-09-26

我正试图使用我在Laravel中的api对JWT进行身份验证，当我只是在控制器中进行身份验证时，它就起作用了，但我试图正确地进行身份验证并使用服务，但我遇到了一个错误。

问题是，当我在错误后刷新时，它会重定向到仪表板（在app.js中设置），这意味着用户已通过身份验证。

我做错了什么？为什么它会给我这个错误？：

TypeError:无法读取未定义的属性"then"

它应该重定向到"仪表板"路由。控制器中的.then(function(data)出现错误。

这是我的服务：

(function() {
    'use strict';
    angular
        .module('app')
        .factory('userService', ['$http', '$auth', userService]);
    function userService($http, $auth) {
        var service = {
            userLogin: userLogin
        };
        return service;
        function userLogin(credentials) {
            $auth.login(credentials)
                .then(function() {
                    $http.get('/api/v1/authenticate/user')
                        .success(function(res) {
                            return res;
                        })
                        .error(function(error) {
                            return error;
                        });
            });
        };
    };
})();

这是我的控制器：

(function() {
    'use strict';
    angular
        .module('app')
        .controller('LoginController', ['$http', '$rootScope', 'userService', LoginController]);
    function LoginController($state, $rootScope, userService) {
        var vm = this;
        vm.login = login;
        vm.error;
        function login() {
            var credentials = {
                email: vm.email,
                password: vm.password
            };
            userService.userLogin(credentials)
                .then(function(data) {
                    if (data) {
                        var user = JSON.stringify(data.user);
                        localStorage.setItem('user', user);
                        $rootScope.currentUser = data.user;
                        $state.go('dashboard');
                    } else {
                        vm.error = error;
                    }
                });
        }
    }
})();

在服务中，如果要"then"方法，则应返回promise。在该服务中，userLogin方法不返回任何内容。

您必须向服务传递回调，或者使用$q.redeferred.

function userService($auth, $http) {
    return {
        userLogin: function(url, credentials, callback) {
            $auth.login(credentials).then(function(data) {
                $http.get(url).then(function(res) {
                    callback(res);
                });
            });
        }
    };
}

在你的控制器

userService("/api/v1/authenticate/user", {password: "pwd", email: "me@me.com"}, function(res) {
    res.status; //200
    res.data; //whatever you got back from the GET request
});

更准确地说，您得到cannot read property then of undefined是因为您没有向原始调用程序返回任何内容。默认情况下，如果不返回任何内容，javascript将返回undefined，因此当您尝试同步返回异步函数时，会得到undefined。

在服务中，您可以像这个一样使用angular提供的$q服务

(function() {
    'use strict';
    angular
        .module('app')
        .factory('userService', ['$http', '$auth', '$q', userService]);
    function userService($http, $auth, $q) {
        var service = {
            userLogin: userLogin
        };
        return service;
        function userLogin(credentials) {
            var deferred = $q.defer();
            $auth.login(credentials)
                .then(function() {
                    $http.get('/api/v1/authenticate/user')
                        .success(function(res) {
                            // return res;
                            deferred.resolve(res);
                        })
                        .error(function(error) {
                            // return error;
                            deferred.reject(error);
                        });
                });
            return deferred.promise;
        };
    };
})();

在控制器中，您可以像当前一样调用服务函数。。

(function() {
    'use strict';
    angular
        .module('app')
        .controller('LoginController', ['$http', '$rootScope', 'userService', LoginController]);
    function LoginController($state, $rootScope, userService) {
        var vm = this;
        vm.login = login;
        vm.error;
        function login() {
            var credentials = {
                email: vm.email,
                password: vm.password
            };
            userService.userLogin(credentials)
                .then(function(data) {
                    if (data) {
                        var user = JSON.stringify(data.user);
                        localStorage.setItem('user', user);
                        $rootScope.currentUser = data.user;
                        $state.go('dashboard');
                    } else {
                        vm.error = error;
                    }
                });
        }
    }
})();

希望这能有所帮助。

相关文章：