代码之家 › 专栏 › 技术社区 › Shamil Yakupov

在解决之前等待工厂加载

angularjs-routing angularjs javascript

Shamil Yakupov · 技术社区 · 11 年前

我有这样的代码:

meow.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider
    .when('/page', {
        templateUrl: 'application/partials/page.html',
        controller: 'index',
        resolve: {'page': ['$resolve', function($resolve) {return $resolve.page();}]}
    })
    .when('/page2', {
        templateUrl: 'application/partials/page2.html',
        controller: 'index',
        resolve: {'page2': ['$resolve', function($resolve) {return $resolve.page2();}]}
    })
    ...
    .otherwise({
        redirectTo: '/error'
    });
}]);
meow.factory('$resolve', ['$q', '$user', function($q, $user) {
    return {
        page: function() {
            var deferred = $q.defer();

            if ($user.logged()) {
                $http.get('/json/page')
                .success(function(data, status, headers, config) {
                    deferred.resolve();
                })
                .error(function(data, status, headers, config) {
                    deferred.reject();
                });
            } else {
                deferred.reject();
            }

            return deferred.promise;
        }
        page2:...
        page3:...
        ...
    }
}]);

如您所见 $resolve 工厂: $user.logged() 但是 $user 是异步的,在首次加载时会导致访问问题。

问题是如何让我的所有决心等待 $用户 ?
我有$user.q()函数,它给出了承诺,但如何将它注入到我的代码中进行所有解析?或者其他解决方案 $routeChangeStart 或 $locationChangeStart 事件?或者我应该插入 $user.q().then(...) 在每一个决心中?

更新1:
我的用户代码:

meow.factory('$user', ['$q', '$http', function($q, $http) {
    var id = null;
    var accesslevel = 0;

    function update() {
        var deferred = $q.defer();

        $http.get('/json/user')
        .success(function(data, status, headers, config) {
            if (data.logged) {
                id = data.id;
                accesslevel = data.accesslevel;
            } else {
                id = null;
                accesslevel = 0;
            }
            deferred.resolve();
        })
        .error(function(data, status, headers, config) {
            deferred.reject();
        });

        return deferred.promise;
    }

    var q = update();

    return {
        logged: function() { return (id) ? true : false; },
        id: function() { return id; },
        accesslevel: function() { return accesslevel; },
        reset: function() {
            id = null;
            accesslevel = 0;
        },
        update: function() { return q = update(); },

        q: function() { return q; }
    };
}]);

非控制器应等待 $user.q() ,解决方案应该。当我试图在 $routeProvider , page 解决尝试加载 /json/page ,但不应等到 $user.q() 已解决并 $user.logged() = true .

所以,唯一的方法是添加

    page: function() {
        var deferred = $q.defer();

        $user.q().then(function() {
            if ($user.logged()) {
                $http.get('/json/page')
                .success(function(data, status, headers, config) {
                    deferred.resolve();
                })
                .error(function(data, status, headers, config) {
                    deferred.reject();
                });
            } else {
                deferred.reject();
            }
        });

        return deferred.promise;
    }

每个解决方案?

2 回复 | 直到 11 年前

bvaughn 11 年前

您通常会这样处理依赖关系的方式是 user 它自己的决心,然后让其他决心依赖它,比如:

resolve: {
  user: function($user) {
    return $user.q();
  },
  somethingElse: function(user, $otherService) {
    // Whatever else
  }
}

这是有点包含在 UI Router wiki .

Enzey 11 年前

$user本身可以是解析所有服务方法的承诺,也可以单独解析每个服务。

用法

$user.then(function(userService) {
    userService.logged();
});

决议

var userDeferred= $q.defer();
userDeferred.resolve({
    logged: function() {
        return false;
    }
});
return userDeferred.promise;