$ 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呼叫。