Question

我正在发送http请求以获取一些信息并在条形图中显示它们。除非我包含alert(" ")

，否则它无效

几乎一切正常，但没有alert()图表不起作用。我怎么解决这个问题？

app.controller('StatisticsCtrl', function ($scope, GitHubService) {


    // funktioniert - Test
    var getFollowedTmp = 0;
    var getFollowersTmp = 0;
    var getStarredTmp = 0;//Favoriten

    GitHubService.getFollowed(function (data) {
        getFollowedTmp = data.length;
    });
    GitHubService.getFollowers(function (data) {
        getFollowersTmp = data.length;
    });
    GitHubService.getStarred(function (data) {
        getStarredTmp = data.length;
    });


    alert("");
    var ctx = document.getElementById("profChart");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["Followers", "Following", "Starred"],
            datasets: [{
                label: 'Quantity',//Anzahl
                backgroundColor: "rgba(0,51,48,0.2)",
                borderColor: "rgba(0,51,48,0.2)",
                borderWidth: 1,             
                data: [getFollowersTmp, getFollowedTmp, getStarredTmp]
            }]
        },

        options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        });

});

Answer 1

GitHubService中的

方法是异步的。当你打电话给警报（＆＃34;＆＃34;）时，你会阻止执行到下一行，从而让git hub服务时间运行并返回。

这是一个使用Jquery进行chaning的示例。其他js框架也会有类似的概念。

var task1  = $.getJSON("http://resourceUri");
var task2  = $.getJSON("http://resourceUri2");

$.when(task1, task2).done(function(task1Response, task2Response){
   var task1Result = task1Response[0];
   var task2Result = task2Response[0];

   //Do something with the data. Charting?
});

Answer 2

没有alert它没有工作的原因是因为GitHubService调用是异步的，所以当你渲染图表时数据就不存在了。

它与alert一起使用的原因是因为alert暂停执行（这是公平的有点神奇）所以当你解除警报时，请求已经完成。

在呈现图表之前，您需要等待三个GitHub服务调用完成。

这可以这样实现：

function tryRender() {
    if (getFollowedTmp && getFollowersTmp && getStarredTmp) {
         var myChart = new Chart(...);
    }
}

GitHubService.getFollowed(function (data) {
    getFollowedTmp = data.length;
    tryRender();
});
GitHubService.getFollowers(function (data) {
    getFollowersTmp = data.length;
    tryRender();
});
GitHubService.getStarred(function (data) {
    getStarredTmp = data.length;
    tryRender();
});

然而，这并不过分优雅。如果您的GitHubService调用返回promises（很多ajax库都可以），您可以这样做：

Promise.all([
    GitHubService.getFollowed(),
    GitHubService.getFollowers(),
    GitHubService.getStarred()
]).then(function(result) {
    var getFollowedTmp = result[0].length;   
    var getFollowersTmp = result[1].length;
    var getStarredTmp = result[2].length;
    var myChart = new Chart(...);
});

Answer 3

删除阻止调用的常见原因之一是打破我的代码＆＃34;是因为阻塞调用为浏览器加载资源提供了时间。

在您的情况下，我认为getFollowersTmp, getFollowedTmp, getStarredTmp未及时初始化。

解决问题的方法之一是使用AngularJS's $q确保在继续之前加载所有依赖项。

除非使用alert（），否则AJAX请求无效

3 个答案: