Deferred promise not deferring

问题:

Hi in the following Angular controller i try to initiate facebook login with Parse.com. So I created a promise triggered on fbLogIn. What it is supposed to do, is first login to facebook, and grab first_name and store it in fieldValuesService.ff. THEN, it is supposed to access this value and do something with it. For illustration purpose I just used console logs. What happens is that the second console.log in second then is triggered before the first one from first .then thus is undefined. I don't understand why anything in the second .then can be triggered before first one in this situation.

Also second problem, after a logout, the fbLogIn function is sometime inactive: it won't trigger the login process again.

If you have a clue on this issue your help will be greatly appreciated.

.controller('logController',
    function ($scope, $q, fieldValuesService) {
        var defer = $q.defer();

         defer.promise
         .then(function() {
                 Parse.FacebookUtils.logIn(null, {
                     success: function(user) {
                         if (!user.existed()) {
                             alert("User signed up and logged in through Facebook!");
                         } else {
                             $scope.currentUser = user;
                             $scope.$apply();
                             FB.api('/me', function(response) {
                                 fieldValuesService.ff = response.first_name;
                                 console.log(fieldValuesService.ff); //logs bob

                             });
                         }
                     },
                     error: function(user, error) {
                         alert("User cancelled the Facebook login or did not fully authorize.");
                     }
                 });
             })
         .then(function(){
                 console.log(fieldValuesService.ff); //logs undefined
         });


        $scope.fbLogIn = function() {
               defer.resolve();

           };

         // Parse log out
        $scope.logOut = function(form) {
            Parse.User.logOut();
            $scope.currentUser = null;

        };
    });   

回答1:

Maybe if you restructure your code, things will become a little bit easier.

I recommend to refactor everything FB related into its own service like:

module.factory('FBService', function ($q) {
    var login,
    logout,
    getInformation;
    login = function () {
        var defered = $q.defer();
        Parse.FacebookUtils.logIn(null, {
            success: function (user) {
                defered.resolve(user);
            },
            error: function (user, error) {
                defered.reject(user, error);
            }
        });
        return defered.promise;
    };
    logout = function () {
        var defered = $q.defer();
        Parse.User.logOut();
        defered.resolve();
        return defered.promise;
    };
    getInformation = function () {
        var defered = $q.defer();
        FB.api('/me', function (response) {
            defered.resolve(response);
        });
        return defered.promise;
    }
    return {
        login: login,
        logout: logout,
        getInformation: getInformation
    };
});

module.controller("LoginCtrl", function ($scope, FBService, fieldValuesService) {
    $scope.fbLogIn = function () {
        FBService.login().then(function (user) {
            $scope.currentUser = user;
            return FBService.getInformation();
        }).then(function (information) {
            fieldValuesService.ff = information.first_name;
            console.log(fieldValuesService.ff);
        });
    };
    $scope.logOut = function () {
        FBService.logout().then(function () {
            $scope.currentUser = null;
         });
    };
});