Question

我正在寻找一种方法，每次使用不同的api url向api发送许多请求。我的项目的示例网址是： http://api.bandsintown.com/artists/Hippo%20Campus/events.json?lapi_version=2.0&app_id=music_matcher

我正在使用HTTP请求将JSON信息提取到我的脚本中并且第一次完美运行。但是，我希望能够在url中使用不同的艺术家名称（我正在使用BandsInTown API）的循环中将其称为50-100次（最大值）。出于某种原因，当我尝试使用循环多次调用http请求时，只会出现一个输出，并且按顺序排列哪个元素是不可预测的（它通常是与数组中第一个或第二个元素关联的输出））。这就是我的代码：

// HTTP GET call to BandsInTown API
function httpGetAsync(theUrl, callback) { //theURL or a path to file
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState == 4 && httpRequest.status == 200) {
        var data = JSON.parse(httpRequest.responseText);
        if (callback) {
            callback(data);
        }                   
    }
    else {
        alert("error loading JSON doc");
    }
};

httpRequest.open('GET', theUrl, true); 
httpRequest.send(null);
}   



//extracts data from api for each artist
function parseEvent(artist) {
var url = "http://api.bandsintown.com/artists/" + artist + "/events.json?lapi_version=2.0&app_id=music_matcher";

httpGetAsync(url, function(data) {
    var numEvents = Object.keys(data).length;

    //var events = [];
    for (var j = 0; j < numEvents; j++) {
        document.write(data[j].venue.name + "-> ");
        document.write("LAT:" + data[j].venue.latitude + " " + "LNG:" + data[j].venue.longitude);
        document.write("ARTIST: " + data[j].artists[0].name);
        document.write("DATE: " + data[j].datetime);
        document.write(" " + j + " "); 
    }
}); 
}

var artists = ["Drake", "Mac Demarco", "Hippo Campus", "STRFKR"];


for (var i = 0; i < artists.length; i++) {
parseEvent(artists[i]);
document.write(" ---NEXT ARTIST--- ");
}

所以我无法确切知道发生了什么，但事情对我当前的代码表现得很奇怪。我没有很多javascript和web开发经验，所以任何帮助表示赞赏！我最好找一种用纯javascript实现这个的方法。我无法弄清楚如何在Eclipse Neon（我正在使用的IDE）中处理Node.js和/或JQuery

Answer 1

你已经很好地实现了闭包这么清楚这不是成功回调一个函数覆盖所有其他人的响应的问题。但是现在当你看document.write()这一切都清楚了，这个函数首先擦除你的整个内容干净然后写下你告诉它的任何东西。这就是为什么你几乎看不到有人使用它

`document.write('a');`
`document.write('b');`
`document.write('c');` // a and b are gone you would see only 'c'

所以在循环结束之后，你只能看到最后一次调用的输出。虽然它最后是哪个调用最后会完成，但由于调整服务器的方式，它主要偏向某个特定的值。

更好的方法是使用一些<div>或其他东西，然后将结果倒入其中

<div id="op"></div>

和

function parseEvent(artist) {
    var url = "http://api.bandsintown.com/artists/" + artist + "/events.json?lapi_version=2.0&app_id=music_matcher";

    httpGetAsync(url, function(data) {
        var numEvents = Object.keys(data).length;
        var op = document.getElementById('op');
        op.innerHTML = op.innerHTML + "  <br><br> <h2>---NEXT ARTIST---<h2>  <br>";
        //var events = [];
        for (var j = 0; j < numEvents; j++) {
          op.innerHTML = op.innerHTML + "<br>" + data[j].venue.name + "-> ";
          op.innerHTML = op.innerHTML + "<br>" + "LAT:" + data[j].venue.latitude + " " + "LNG:" + data[j].venue.longitude ;
          op.innerHTML = op.innerHTML + "<br>" +"ARTIST: " + data[j].artists[0].name;
          op.innerHTML = op.innerHTML + "<br>" +"DATE: " + data[j].datetime;
          op.innerHTML = op.innerHTML + "<br>" + " " + j + " <br>"; 
        }
    }); 
}

var artists = ["Drake",  "Hippo Campus", "STRFKR","Mac Demarco"];

for (var i = 0; i < artists.length; i++) {
  parseEvent(artists[i]);
}

使用循环向api发送多个HTTP GET请求

1 个答案: