带有 Promise 的 Angular 代码在 Firefox 中有效，但在 Chrome 中无效？

Question

我有一个 URL，我从中挑选 Chuck Norris 笑话。基本上为了得到 100 个笑话，我点击了 URL 100 次并将结果存储在一个数组中并执行 ng-repeat。很直接。当我在谷歌浏览器上执行相同的代码时，问题就来了。它只是获取第一个命中的数据，然后不命中 URL 并用第一个数据填充整个数组。我不明白为什么同一代码有两种不同的行为。请帮忙。它在 Firefox 中完美运行，但在 google chrome 中无法运行。 您可以在 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 正在缓存第一个请求的结果并只是重复使用这些结果？

如果您在请求 URL 的末尾添加一个随机查询参数值会怎样？如果是浏览器缓存问题，在末尾添加&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/

它现在也变慢了，因为它进行了更多的网络调用（如你所愿）