AJAX请求不起作用，除非使用alert(）

AJAX request not working unless alert() is used

本文关键字：alert 请求 不起作用 AJAX      更新时间：2023-09-26

我正在进行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
                        }
                    }]
                }
            }
        });
});
GitHubService中的

方法是异步的。当您调用alert（"）时，您会阻止执行到下一行，从而给github服务运行和返回的时间。

下面是一个使用Jquery进行切换的示例。其他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?
});

没有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调用返回promise（许多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(...);
});

"删除阻塞调用会破坏我的代码"的一个常见原因是，阻塞调用为浏览器加载资源提供了时间。

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

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

相关文章：