Http 调用在 angular.js 中发生了两次

Question

$http is getting called multiple times in AngularJS 可能重复

抱歉，我没有 50 个声望来评论同一个帖子。 我们正在使用 http 服务调用 api，并且所有服务都具有通过 cookiestore 值传递的会话 ID。 api 调用第一次不起作用，因为会话 id 在第一次调用期间为空，并且仅适用于第二次调用。

任何人都可以帮助我们解决这个问题。我们有多个 api，并且都发生了两次，这实际上增加了负载。是的，我们已经研究过了。

Router.js

    angular.module('adminsuite',['ngFileUpload','ui.router','ngCookies','angular-clipboard','ngAnimate', 'ngSanitize', 'ui.bootstrap','ngMessages']).constant("__env",env).config(function($stateProvider, $urlRouterProvider, $locationProvider) {

$urlRouterProvider.otherwise('/');
//$locationProvider.html5Mode(true);
$stateProvider
    .state('login', {
        url: '/',
        views:{
            header:{
                templateUrl: '',
                controller: ''
            },
            pageContent:{
                templateUrl: 'Login/login3.html',
                controller: 'loginController'
            },
            footer:{
                templateUrl: 'common/footer3.html',
                controller: 'footerController'
            }
        }



    })

    // HOME STATES AND NESTED VIEWS ========================================
    .state('dashboard', {
        url: '/dashboard',
        views:{
            header:{
                templateUrl: 'common/header.html',
                controller: 'headerController'
            },
            pageContent:{
                templateUrl: 'dashboard/dashboard.html',
                  controller: 'dashboardController'
            },
            footer:{
                templateUrl: 'common/innerFooter.html',
                controller: 'footerController'
            }
        }
    })
    //SURVEY STATES
    .state('survey', {
        url: '/survey',
        views:{
            header:{
                templateUrl: 'common/headerTool.html',
                controller: 'headerController'
            },
            pageContent:{
                templateUrl: 'survey/survey.html',
                  controller: 'surveyController'
            },
            footer:{
                templateUrl: 'common/innerFooter.html',
                controller: ''
            }
        }
    });

    // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================

 })

LoginAuthenticationService.js

UserService.GetByUsername(requestData)
            .then(function (user) {
                console.log(user);
                if (user.SessionID) {
                   sessionID = user.SessionID;
                   userDetails = user.UserProfile;
                   response = { success: true};
                } else {
                    response = { success: false, message: 'Username or password is incorrect' };
                }
                callback(response);
            });

用户服务.js

function GetByUsername(user) {
    //console.log(__env.apiUrl);
    return $http.post(__env.apiUrl+'/UserAuthentication/login',  user, {headers: { 'Content-Type': 'application/json'}}).then(handleSuccess, handleError('Error getting user by username'));
}

Api.js

 $http.get(__env.apiUrl+'/UserSurvey/GetAllSurveys',  {
                            headers: { 'Content-Type': 'application/json','SessionID':$rootScope.token}
                                })
                .then(function(response){
                        console.log(response);
                            return response.data;
                        }, function(error){
                             console.log("error");
                              console.log(error);
                            return error;
                        });

任何帮助表示赞赏。

Answer 1

假设，您已经在应用程序中使用 AngularUI 状态定义声明了控制器，如下所示：

$stateProvider
 .state('index',
 {
   url          :   '/',
   templateUrl  :   'templates/home.html',
   controller   :   'HomeController'
 })

然后，在 home.html 视图模板中，您还可以使用 ng-controller 指令声明控制器，如下所示：

<div ng-controller="HomeController">

然后您在不知不觉中附加了两次控制器（一次通过状态定义，两次通过 ng-controller 指令），这导致控制器中包含的代码也执行两次。

Answer 2

您可能遇到了摘要周期问题。

当我的 AJAX 模块位于纯 Javascript 中时，我的数据会在第一个服务器查询上呈现。但是，当我将 AJAX 模块放在 AngularJS 模块中时，我必须在数据呈现之前查询服务器两次。请注意，查询是从 UI 调用的。

在四处寻找之后，我意识到数据确实在第一个查询中到达并被分配给所有指定的对象和变量，但仅在 AngularJS 代码的范围内。当然，数据是异步到达的，UI 已经经历了一个摘要循环，没有理由再去一次，因为 UI 中没有任何变化。当 UI 发生变化时，Angular 会更新所有内容，但当变化（到达的数据）来自服务器时，什么都不做。

随后，第二个相同的查询将强制执行摘要循环，并使用第一个查询中已经存在的数据更新所有绑定。 因此，目标是从 Javascript 强制一个摘要循环来更新您的 UI 绑定。我现在在回调函数结束时强制执行摘要循环。 要强制执行摘要循环，请在数据变量分配完成后放置 Angular 方法 $scope.$apply([exp])。我在 https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply 的 Angular 文档中找到了有用的详细信息，并且在 http://jimhoskins.com/2012/12/17/angularjs-and-apply.html 找到了一个很好的工作示例解释，以及在 How to call $scope.$apply() using "controller as" syntax 强制执行摘要循环时使用“控制器作为”语法的重要细节，并希望这解决了双重 HTTP 调用的问题。