两次API调用后,AngularJS返回数据

时间:2015-05-27 09:55:17

标签: javascript html angularjs http

好吧这可能有点复杂。我创建了这个服务来处理api调用:

.service('HttpHandler', ['ErrorService', function (service) {

    // Function to handle promises
    this.loadData = function (promise) {

        // Declare our model
        var model = {
            data: null,
            loading: true,
            promise: promise,
            error: null
        };

        // If our promise succeeds
        promise.then(function (response) {

            // Store the data
            model.data = response.data.result || response.data;
        }, function (error) {

            // Process our error
            model.error = service.process(error);
        });

        // Finally
        promise.finally(function () {

            // Set our loading flag to false regardless if there is an error or not
            model.loading = false;
        });

        // Return our model
        return model;
    };
}])

这允许我访问控制器中的数据以及错误等。 这在我的应用程序中运行良好,并在整个过程中使用。

我的登录控制器如下所示:

.controller('LoginController', ['$state', '$stateParams', 'AccountService', function ($state, $stateParams, service) {
    var self = this;

        // Get our return Url
        returnState = $stateParams.returnState,
        returnParams = $stateParams.returnParams;

    // Our login model
    self.model = {
        userName: '',
        password: ''
    };

    // The login function
    self.loginUser = function (valid) {

        // Check to see if our form is valid
        if (!valid)
            return;

        // Login
        self.login = service.login(self.model);

        // If we login properly
        self.login.promise.then(function (response) {

            // If we have a return Url
            if (returnState) {

                // Go to that url
                $state.go(returnState, returnParams);
            } else {

                // Otherwise, Redirect to the home page
                $state.go('dashboard');
            }
        });
    };
}])

正如您所看到的,它使用上面的处理程序来做事情(在视图中还有一个处理任何错误的指令)。希望这很容易理解。 现在,这是复杂的一点。

我的登录功能正常运行:

// Function to login
self.login = function (model) {

    // Set our data
    var data = 'grant_type=password&userName=' + model.userName + '&password=' + model.password;

    // Use the handler to login
    var login = handler.loadData($http.post('/oauth/token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }));

    // If the user is logged in
    login.promise.then(function (response) {

        // Assign our object to our user variable
        var user = { token: response.data.access_token, userName: model.userName, authenticated: true };

        // Store our user in the cookie
        $cookies.user = angular.toJson(user);

        // Store our current user in the $rootScope
        $rootScope.user = user;
    });

    // Return the handled api request
    return login;
};

您可以在此处看到它返回登录,而不必担心在此函数中执行的代码。但是,我现在想要对此函数进行更改以实际从用户获取一些数据。我把它改成了这个:

// Function to login
self.login = function (model) {

    // Set our data
    var data = 'grant_type=password&userName=' + model.userName + '&password=' + model.password;

    // Use the handler to login
    var login = handler.loadData($http.post('/oauth/token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }));

    // If the user is logged in
    login.promise.then(function (response) {

        // Assign our object to our user variable
        var user = { token: response.data.access_token, userName: model.userName, authenticated: true };

        // Create our request
        var request = {
            method: 'GET',
            url: 'api/users',
            headers: {
                'Authorization': 'Bearer ' + user.token
            },
            params: { username: model.userName }
        };

        // Get the current user
        $http(request).then(function (response) {

            // Get our data
            var data = response.data;

            // Assign our new data to our user object
            user.roles = data.roles;
            user.companyId = data.companyId;

            // Store our user in the cookie
            $cookies.user = angular.toJson(user);

            // Store our current user in the $rootScope
            $rootScope.user = user;
        });
    });

    // Return the handled api request
    return login;
};

现在我遇到的问题是,在解析用户信息之前,我不希望它返回登录

0 个答案:

没有答案