angularjs - AngularJS 等待带有 .then 的 ajax 响应没有按预期工作

Question

在我的应用程序中，我想检查用户是否已登录，因此我可以启用或禁用菜单中的按钮。我可以用一种简单的方式做到这一点，但后来我遇到了一个问题，即菜单会“闪烁”，用户会在其中看到一些菜单项，直到出现来自 ajax 的响应。

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
  $http.get('api/users/userLoggedIn').then(function(data){
        console.log(data);
        $scope.userLoggedIn = data;
    });
});

这就是我想出的，如果我遵循文档。然后在我的页面加载之前做出承诺并等待来自 ajax 调用的响应，但这不是发生的事情，“眨眼”仍然在发生。

任何想法如何解决这个问题？

Answer 1

您应该隐藏所有菜单项，然后在响应返回后显示它们。

然后，您可以在呼叫发生时放置加载程序 gif。有一个很棒的帖子在这里

因此，用户将看到一个带有加载程序 gif 的空白菜单，然后一旦响应返回，将显示正确的菜单项。

空白内容 + 加载器 gif 通常是解决此问题的方法，因为它比 FOUC（无样式内容的闪存）更可取

希望这可以帮助。