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

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

当我在后端调用此函数时，它会被多次调用。其他API也发生了同样的事情。

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

我们得到的一个特殊问题是在$ http调用的标题部分发送令牌ID，但是后端的这个调用发生了两次，而且发生了多次。在第一次这个标题标记显示为空时，第二次或更多时间它给出结果。请检查以下代码。

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中的任何内容都没有改变。当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的工作示例的一个很好的解释，以及在强制摘要周期时使用“控制器为”语法的重要细节：{ {3}}并希望这可以解决双重HTTP调用的问题。

在AngularJS中多次调用$ http

1 个答案:

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