AngularJS $http 无限调用

Posted 2023-03-07

【中文标题】AngularJS $http 无限调用

【英文标题】：AngularJS $http calling infinitely

【发布时间】：2016-07-17 12:42:36

【问题描述】：

有人可以解释为什么 $http 请求会向服务器发送无限数量的请求吗？ 在我的应用程序中，此代码向服务器发送无限请求

(function()
    var app = angular.module("GrahamsSocksProducts", ["ngCookies"]);
    app.controller("ProductsController", ["$controller", "$http", "$cookies", function($controller, $http, $cookies)
.
.
.
this.setCookie = function()
        username = "Some random guy"
        alert(45)

        $http(
            method : "GET",
            url : "http://_____________",
            params :  username : username 
        ).then(function()
            //do something
        )
    

但是，当我删除 http 请求时，只有一个请求被传递到服务器，如下所示：

.
.    
.
this.setCookie = function()
        username = "Some random guy"
        alert(45)

.
.
.

html：

<div ng-app="GrahamsSocksProducts">
        <div ng-controller="ProductsController as products">
         products.setCookie() 
            <div class="row">
                <div ng-repeat="product in products.products">
                    <div class="col-sm-4 col-lg-4 col-md-4">
                        <div class="thumbnail">
                            <img ng-src="products.getImageTag(product)">
                            <div class="caption">
                                <h4 class="pull-right">$ product.price </h4>
                                <h4>
                                    <a href="#">  product.name </a>
                                </h4>
                                <p> product.description </a>.</p>
                                </div>
                    </div>
                    <div class="ratings">
                        <p class="pull-right"> product.ratings  / 5</p>
                        <p>
                                <span ng-class="products.getStarColor(product.ratings, 1)" ng-click="product.ratings=1"></span>
                                <span ng-class="products.getStarColor(product.ratings, 2)" ng-click="product.ratings=2"></span>
                                <span ng-class="products.getStarColor(product.ratings, 3)" ng-click="product.ratings=3"></span>
                                <span ng-class="products.getStarColor(product.ratings, 4)" ng-click="product.ratings=4"></span>
                                <span ng-class="products.getStarColor(product.ratings, 5)" ng-click="product.ratings=5"></span>
                        </p>
                    </div>
                    <div>
                        <button class="btn btn-primary" ng-click="products.addToCart(product)">Add to Cart</button>
                        <button class="btn btn-default">Checkout</button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="container">                 
                        <div class="jumbotron">
                            <ul class="list-group"ng-repeat="cartProduct in products.getCartNameAndQuantity()">
                                <li class="list-group-item"> cartProduct.name   ( cartProduct.quantity )</li>
                            </ul>
                            Cart products price :  products.getCartPrice() 
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

我已阅读其他问题，例如： Infinite loop when trying to make Angularjs display a promise 他们已经回答了 AngularJS 如何允许双向数据绑定，但在这种情况下，当 $http 代码被删除时，请求被发送一次，否则无限次。

【参考方案1】：

每次运行摘要循环时都会运行表达式 products.setCookie() ，这非常多。每次页面更改、点击、事件等时。我不知道为什么你在视图本身上有这个表达式，但你需要把它放在其他地方

【讨论】：

如果 OP 想在 ProductsController 被实例化时运行它，应该把它放在控制器定义的主体中。

是的，这是一个更好的地方。它只会在控制器被实例化时运行

您还应该从视图中删除此函数调用并绑定到在控制器中设置的值：

以前不知道摘要循环；我应该提到“AngularJS 中的新手”。谢谢

有什么比让它让你的应用爆炸更好的方式来了解它：)