Question

我有一个网址，我从中挑选Chuck Norris Jokes。基本上为了获得100个笑话，我点击了100次URL并将结果存储在一个数组中并进行ng-repeat。挺直的。当我在谷歌Chrome上执行相同的代码时出现问题。它只是获取第一个匹配的数据，然后没有命中URL并用第一个数据填充整个数组。我无法理解为什么同一代码有两种不同的行为。请帮忙。它在Firefox中完美运行，但在谷歌浏览器中并不适用。您可以在Fiddle上找到代码。尝试在Chrome和Firefox上运行相同的代码，您会发现差异。请帮忙。

代码如下： -

var app=angular.module('JokeApp',[]);

/**
 * Created by roger on 25/2/14.
 */
app.controller('JokeCtrl',['$scope','$http','$q',function($scope,$http,$q){
    $scope.pageTitle="JokeApp";
    $scope.data={"jokeList":[]};
    $scope.services={};
    $scope.processing={};
    $scope.processBusy=true;
    $scope.dataTemplate=function(id,joke,category){
        return {
            "id":id,
            "joke":joke,
            "category":category
        };
    };

    $scope.getJoke = function(callback) {
        return $http.get("http://api.icndb.com/jokes/random?limitTo=[nerdy]").success(
            function(data) {
                return callback($scope.dataTemplate(data.value.id,data.value.joke,data.value.categories[0]));
            }
        );
    };
    $scope.getJokes = function () {
        var prom = [];
        for(var i=0;i<10;i++){
            prom.push($scope.getJoke(function(value){
                $scope.data.jokeList.push(value);
            }));
        }
        $q.all(prom).then(function () {
            console.log("DONE!!!");
            console.log($scope.data.jokeList);
            $scope.processBusy=false;
        });
    };

    $scope.getJokes();
}]);

HTML就像

<div class="container-fluid" ng-app="JokeApp" ng-controller="JokeCtrl">
    <table class="table-responsive" ng-show="!processBusy">
        <thead>
            <tr>
                <th>ID</th>
                <th>Joke</th>
                <th>Categories</th>
            </tr>
        </thead>
        <tbody>
        <tr ng-repeat="data in data.jokeList">
            <td>{{data.id}}</td>
            <td>{{data.joke}}</td>
            <td>{{data.category}}</td>
        </tr>
        </tbody>
    </table>
</div>
</body>

Answer 1

可能是Chrome正在缓存第一个请求的结果并重新使用它们吗？

如果您在请求网址末尾添加了随机查询参数值，该怎么办？如果是浏览器缓存问题，最后添加&a=<random-number>应该会阻止缓存，因为每次请求的URL都不同。

所以不要总是要求

$http.get("http://api.icndb.com/jokes/random?limitTo=[nerdy]")

尝试

$http.get("http://api.icndb.com/jokes/random?limitTo=[nerdy]&foo=" + Math.random())

<强>更新

看起来这就是问题，你可以看到它在这里取出不同的笑话：http://jsfiddle.net/V8ztg/

它现在也变慢了，因为它正在进行更多网络呼叫（如你所愿）

Angular Code with Promise适用于Firefox但不适用于Chrome？

1 个答案: