$ http wird in AngularJS mehrfach aufgerufen

Question

In meinem Projekt wird der $ http Aufruf mehr als einmal jedes Mal aufgerufen. Überprüfen Sie den folgenden Code.

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

Als ich cal l Diese Funktion im Backend wird mehr als einmal aufgerufen. Und dasselbe gilt für die anderen APIs.

Ich habe alle doppelten Controller entfernt, aber das Problem bleibt bestehen.

Ein besonderes Problem, was erhalten wird, ist das Senden der Token-ID im Header-Abschnitt von $ http Anruf, aber dieser Anruf im Back-End passiert zweimal und einige Male mehr als das. In der ersten Zeit zeigt dieses Header-Token leere und zweite Male oder mehr als die Zeit, die es das Ergebnis gibt. Bitte überprüfen Sie den folgenden Code.

api Anruf

$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

Sie könnten ein Problem verdauen Zyklus werden müssen.

Wenn mein AJAX-Modul in reinem Javascript befindet, rendert meine Daten auf der ersten Server-Abfrage. Wenn ich jedoch mein AJAX-Modul in ein AngularJS-Modul platziere, muss ich den Server zweimal abfragen, bevor meine Daten gerendert werden. Beachten Sie, dass die Abfrage über die Benutzeroberfläche aufgerufen wird.

Nach dem Stöbern stellte ich fest, dass die Daten tatsächlich bei der ersten Abfrage angekommen waren und allen designierten Objekten und Variablen zugewiesen wurden, aber nur im Rahmen des AngularJS-Codes. Natürlich waren die Daten asynchron angekommen und die UI hatte bereits einen Digest-Zyklus durchlaufen und hatte keinen Grund, wieder zu gehen, weil sich nichts in der Benutzeroberfläche geändert hatte. Bei einer Änderung in der Benutzeroberfläche aktualisiert Angular alles, tut aber nichts, wenn die Änderung (ankommende Daten) vom Server kommt.

Anschließend würde die zweite identische Abfrage einen Digest-Zyklus erzwingen und alle Bindungen mit den Daten aktualisieren, die bereits dort von der ersten Abfrage aus vorhanden waren. Ziel ist es daher, einen Digest-Zyklus von Javascript zu erzwingen, um Ihre UI-Bindungen zu aktualisieren. Ich erzwinge nun einen Digest-Zyklus am Ende meiner Callback-Funktion. Um einen Digest-Zyklus zu erzwingen, platzieren Sie die Angular-Methode $scope.$apply([exp]), nachdem Ihre Datenvariablenzuweisungen abgeschlossen sind. Ich fand hilfreiche Details in der Angular Docs unter: https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply und auch eine gute Erklärung mit Arbeitsbeispielen unter: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html und ein wichtiges Detail über die Verwendung der "Controller als" -Syntax beim Erzwingen eines Digest-Zyklus bei: How to call $scope.$apply() using "controller as" syntax und hoffentlich behebt dies das Problem der doppelter HTTP-Aufruf