Question

我在等待来自authService.login（）的回调时遇到问题。在用户完成登录之前，我的视图正在更新。我将引导我们完成代码。

设置Angular app：

var htsApp = angular.module('htsApp', []);

下面我正在配置Angular以发出XHR请求：

htsApp.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
}]);

当用户提交登录表单时会触发loginPassport（）。这会从我的Angular工厂调用我的authService.login（），但更新视图的代码不会在执行前等待回调。救命？

function loginController($scope, $sce, authService){

    $scope.loginPassport = function() {  //gets called when user clicks login button

        var email = $scope.email;
        var password = $scope.password;

        authService.login(email, password, function(res) {

            //This code is being run before callback is received!!!
            //Update my view in Angular

            $scope.loginMenuContainer = $sce.trustAsHtml(authService.getLoginModuleHtml());
        });


    };
};

authService.login（）以异步方式登录用户

htsApp.factory('authService', function($http, Session){
    return {
        login: function(email, password, callback){
            $http.post("/login", {"email":email, "password":password})
                .success(callback, function(passportRes) {

                    if(passportRes.success){ //We are logged in!!

                        Session.create(passportRes.user.email, passportRes.user.id);

                    } else { //There was an error logging the user in

                    }

                //Passport JS Middleware Error
                }).error(function(data, status, headers, config) {

                });
        },
        isLoggedIn: function(){ //Check if user is logged in

            return !!Session.email;

        },
        getLoginModuleHtml: function(){ //Get correct HTML if user is logged in or not

            var html = '';

            if(this.isLoggedIn()){
                html = '<div>html if user is logged in</div>';
            } else {
                html ='<div>html is user is logged out!</div>';
            }

            return html;
        }
    }
});

此服务用于在会话中存储用户信息

htsApp.service('Session', function () {
    this.create = function (email, id) {
        this.email = email;
        this.id = id;
    };
    this.destroy = function () {
        this.email = null;
        this.id = null;
    };
    return this;
})

Answer 1

您可以使用promise和$ a在此处对此进行更多排序https://docs.angularjs.org/api/ng/service/ $ q

authService：

htsApp.factory('authService', function ($http, $q, Session)
{
    return {

        login: function (email, password)
        {
            var deffered = $q.defer();

            $http.post("/login", { "email": email, "password": password })

                //sucess
                .then(function (passportRes)
                {

                    if (passportRes.success) { //We are logged in!!

                        Session.create(passportRes.user.email, passportRes.user.id);
                        deffered.resolve();

                    } else { //There was an error logging the user in

                    }


                },
                //error
                function (data, status, headers, config)
                {
                    deffered.reject();

                });

            return deffered.promise;

        },
        isLoggedIn: function ()
        { //Check if user is logged in

            return !!Session.email;

        },
        getLoginModuleHtml: function ()
        { //Get correct HTML if user is logged in or not

            var html = '';

            if (this.isLoggedIn()) {
                html = '<div>html if user is logged in</div>';
            } else {
                html = '<div>html is user is logged out!</div>';
            }

            return html;
        }
    }
});

<强>控制器

function loginController($scope, $sce, authService)
{

    $scope.loginPassport = function ()
    {  //gets called when user clicks login button

        var email = $scope.email;
        var password = $scope.password;

        authService.login(email, password).then(function ()
        {
            $scope.loginMenuContainer = $sce.trustAsHtml(authService.getLoginModuleHtml());
        }, function ()
        {
            alert("login error");
        });
    };

}

Answer 2

你应该看看承诺。您需要为应用设置承诺，以便能够等待登录成功。

你必须这样做，因为AngularJS本质上是异步的，并且设置一个promise将使部件等待承诺被返回，然后执行应用程序的任何部分需要等待该信息到达。

查看关于promises的博客文章。我认为它解释得很好。

http://andyshora.com/promises-angularjs-explained-as-cartoon.html

AJAX调用后的角度更新视图

2 个答案: