Question

我的角度应用程序分为4个模块，所有模块都需要用户详细信息，所以我从每个模块调用getUser方法。因此，当我的应用程序加载所有4个模块同时命中getUser API时，会在服务器上产生4个get请求。我怎么能阻止这个？我在我的getUser方法中使用单例模式，所以一旦我的用户被加载，它将只是从一个对象服务用户。但如果所有模块同时请求用户，那么这并不能解决问题。

我的代码看起来像这样

getUser() {
let defer = this.q.defer();

if (!this.user) {
    this.http.get(`${this.config.apiHost}users`)
        .success(result => {
            this.user = result;

            this.rootScope.$broadcast('userFound', this.user);
            defer.resolve(this.user);
        })
        .error(err => defer.reject(err))
}
else {
    defer.resolve(this.user);
    this.rootScope.$broadcast('userFound', this.user);
}
return defer.promise;
}

Answer 1

通过将当前请求存储在变量中，对UserService.get的调用将返回相同的请求承诺。

然后当承诺解决时，它将解析为您的所有模块。

    angular.module('app').service('UserService', function ($http) {

    var self = this;

    var getRequestCache;

    /**
     * Will get the current logged in user
     * @return user
     */
    this.get = function () {
        if (getRequestCache) {
            return getRequestCache;
        }

        getRequestCache = $http({
            url: '/api/user',
            method: 'GET',
            cache: false
        }).then(function (response) {
            // clear request cache when request is done so that a new request can be called next time
            getRequestCache = undefined;
            return response.data;
        });

        return getRequestCache;
    };

});

Answer 2

您正在使用ui-router进行路由。然后，您可以使用此功能在登陆页面时解析用户。

在你的路由配置中：

$stateProvider
    .state('myPage', {
        url: '/myPage',
        templateUrl: 'myPage.html',
        controller: 'myCtrl',
        resolve: {
            userDetails: ['UserService', function(UserService) {
                return UserService.getUserDetails();
            }],
        }
    })

在您的控制器中

angular.module('myModule')
    .controller('myCtrl', ['userDetails', function(userDetails) {
        console.log(userDetails);
        }];

这将在加载页面时加载用户详细信息。

Answer 3

我通过将defer对象用作全局对象来解决这个问题，因此只能初始化一次。

处理angularjs中的同步get调用

3 个答案: