$ http在AngularJS中被多次调用

Question

在我的项目中，$ http调用每次都会被调用一次以上。检查下面的代码。

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: '' 
      } 
     } 
    }).state('survey.surveyList', { 
     url: '/:id', 
     templateUrl: 'survey/surveyList.html', 
     controller: '' 
    }).state('survey.surveyList.details', { 
     url: '', 
     templateUrl: 'survey/survey-details/summary.html', 
     controller: '' 
    }).state('survey.surveyList.questionare', { 
     url: '', 
     templateUrl: 'survey/questionare/questionare.html', 
     controller: 'questionareController' 
    }).state('survey.surveyList.sampleManagement', { 
     url: '', 
     templateUrl: 'survey/sample-management/sample-management.html', 
     controller: '' 
    }).state('survey.surveyList.quotaManagement', { 
     url: '', 
     templateUrl: 'survey/quota-management/quota-management.html', 
     controller: 'quotaController' 
    }).state('survey.surveyList.scheduling', { 
     url: '', 
     templateUrl: 'survey/scheduling/scheduling.html', 
     controller: '' 
    }).state('survey.surveyList.notification', { 
     url: '', 
     templateUrl: 'survey/notification/notification.html', 
     controller: '' 
    }).state('survey.surveyList.reports', { 
     url: '', 
     templateUrl: 'survey/reports/reports.html', 
     controller: '' 
    }).state('survey.surveyList.location', { 
     url: '', 
     templateUrl: 'survey/location/location.html', 
     controller: '' 
    }); 

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

}) 

loginAuthentication.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); 
       }); 

UserService.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')); 
    } 

当我CAL l这个函数在后端被多次调用。其他API也在发生同样的事情。

我删除了所有重复的控制器，但问题依然存在。

我们得到的一个特殊问题是在$ http调用的标题部分发送令牌标识，但是在后端发出的这个调用发生两次，甚至多次。第一次，这个标题标记显示空白，第二次或超过它给出结果的时间。请检查下面的代码。

API调用

$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

你可能有一个消化周期问题。

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

后来我发现数据确实已经到达第一个查询，并被分配给所有指定的对象和变量，但只在AngularJS代码的范围内。当然，数据是异步到达的，UI已经经历了一个摘要循环，没有理由再次去，因为UI中没有任何变化。当用户界面发生变化时，Angular会更新所有内容，但在更改（到达数据）来自服务器时不会执行任何操作。

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