AngularJS gọi HTTP nhiều lần trong bộ điều khiển

Tôi đang phát triển một trang với Angular và có phương thức init() trong bộ điều khiển của tôi. Mã này như sau:AngularJS gọi HTTP nhiều lần trong bộ điều khiển

var filtersController = ['$scope', '$http', function ($scope, $http) { 
    $scope.init = function() { 
     $http({ 
      method: 'GET', 
      url: '/json-tags-test', 
      cache: true 
     }).success(function (data, status, headers, config) { 
       // this callback will be called asynchronously 
       // when the response is available 
     }).error(function (data, status, headers, config) { 
      // called asynchronously if an error occurs 
      // or server returns response with an error status. 
     }); 
    }; 
}];

Đây chỉ là cuộc gọi đến tệp JSON đơn giản.

HTML của tôi là như sau:

<div class="container main-frame" ng-app="projectsApp" ng-controller="filtersController" ng-init="init()"> 
</div>

Đối với một số lý do, điều này có được cuộc gọi được gọi hai lần mỗi khi tôi tải trang. Đây có phải là hành vi tiêu chuẩn này không?

Rất cám ơn,

Dash

enter image description here

Nguồn

2013-07-31 iamdash

Câu trả lời ở phía dưới với upvotes cao nhất (hiện nay 33) nên được đánh dấu là câu trả lời chính xác cho câu hỏi này. – vivekp

Sự cố này cũng có thể là do có một số ng-app có định tuyến đến trình điều khiển của bạn và tham chiếu ng-controller trong trang của bạn. Ví dụ, nếu ứng dụng của bạn trông giống như:

<html lang="en" ng-app="myApp"> 
<head>...</head> 
<body> 
<div ng-controller="myController"> 
... 
</div> 
</body> 
</html>

Javascript định ứng dụng:

angular.module('myApp',[]) { 
$routeProvider.when('/path', {templateUrl: '...', controller: myController);

Trong trường hợp trên, với định tuyến định nghĩa MyController, bộ điều khiển sẽ được khởi tạo hai lần và bạn sẽ xem hai cuộc gọi như được mô tả.

Cập nhật

Trên đang mô tả vấn đề là gì nhưng những gì là đúng đắn giải pháp là mất tích câu trả lời vì vậy tôi được cập nhật theo bình luận @Intrepid.

Cần xóa ng-controller="myController" khỏi mẫu html của bạn nếu bạn đã xác định trong tuyến đường.

Nguồn

2014-02-05 17:55:33

Điều cần biết, nó giúp tôi hiểu điều này tốt hơn. – gazdac

@ user3195089 Đây là giải thích tốt. – lbrahim

@ user3195089 Cảm ơn, nhưng làm cách nào để khắc phục vấn đề này? Ý tôi là thực hành tốt nhất là gì. –

Tôi không nghĩ rằng đó là nhận được gọi là hai lần, tôi vừa tạo ra một plunk để bạn có thể thấy điều này.

var app = angular.module('projectsApp', []); 
app.controller('filtersController', ['$scope', '$http', function ($scope, $http) { 
    $scope.status = 'Page loading'; 
    var count = 0; 
    $scope.init = function() { 
     $scope.status = 'API called'; 
     $http({ 
      method: 'GET', 
      url: '/json-tags-test', 
      cache: true 
     }).success(function (data, status, headers, config) { 
       // this callback will be called asynchronously 
       // when the response is available 
      console.log('success'); 
      count++; 
      $scope.status = 'successful: '+ count; 
     }).error(function (data, status, headers, config) { 
      // called asynchronously if an error occurs 
      // or server returns response with an error status. 
      console.log('error'); 
      count++; 
      $scope.status = 'failed times: '+ count; 
     }); 
    }; 
}]);

bản ghi XHR từ các công cụ DEV

Network console only one HTTP call

Edit:

Cập nhật liệng với tệp json giả

http://plnkr.co/edit/hTdtLK?p=preview

Same seen in logs

Như bạn có thể thấy một lần nữa rằng nó chỉ được gọi một lần. Xóa nhật ký tôi đoán bạn đang nhìn thấy nhật ký cho tải trang trước đó, thay đổi coz sẽ hiển thị ngay lập tức khi ở chế độ xem trước.

Nguồn

2013-07-31 10:18:06 Atrix1987

Cảm ơn vì điều đó. Vâng, tôi thấy điều đó ngay bây giờ; đầu ra trạng thái 1. Tuy nhiên, bảng điều khiển công cụ Dev hiển thị hai thông báo "tải XHR đã tải xong" vào cùng một URL? Đây có phải là một tính năng của công cụ dev không? – iamdash

trong bảng điều khiển 1 có thể chỉ xem một nhật ký cho XHR tải xong cho url/json-tags-test. Tôi cũng sẽ đính kèm ảnh chụp màn hình. cũng xin vui lòng chấp nhận câu trả lời nếu nó giúp bạn. Cảm ơn – Atrix1987

OK, tôi thấy điều đó, nhưng nó đang cố gắng tải nó hai lần trong Plunk quá. Trừ khi tôi đang thiếu cái gì đó. Tôi đã đính kèm một ảnh chụp màn hình để OP của tôi để bạn có thể thấy, sự khác biệt là nó tìm thấy/jason-tags-test trong cuộc gọi đầu tiên rõ ràng. – iamdash

Nếu bạn đang sử dụng giao diện người dùng-Router, tốt hơn để sử dụng controllerAs trong cấu hình và loại bỏ ng-bộ điều khiển trong dạng xem.

.state('master.userlist', { 
 
       url: "userlist", 
 
       views: { 
 
        userlist: { 
 
         templateUrl: 'app/user/userlist.html', 
 
         controller: 'UserController', 
 
         controllerAs:'vm' 
 
        }, 
 
        '[email protected]': { 
 
         templateUrl: 'app/user/userdetail.html' 
 
        }, 
 
       } 
 
      });

Nguồn

2017-12-18 12:11:18 SFK

AngularJS gọi HTTP nhiều lần trong bộ điều khiển

Trả lời

Các vấn đề liên quan