Question

我正在尝试创建一个网站，通过Spotify Web API，我可以显示某个元素（艺术家，曲目，专辑等）的信息。在我搜索歌曲的功能中，我调用另一个功能，该功能应该对歌曲的更具体信息（时间，键......）发出请求，并将结果与第一个功能的结果一起返回打印。问题是，当我去打印第二个函数的结果时，它给了我答案＆＃34; undefined＆＃34;。我相信第二个功能的请求是成功的，因为控制台不会给我错误。有人可以帮我理解错误的位置吗？

    function ricercaTrack() {         // the first function
  var token = document.getElementById("token").innerHTML;
  var xhr = new XMLHttpRequest();
  var artist = document.getElementById("artista").value;
  artist = artist.replace(" ", "%20");
  console.log(artist);
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var response = JSON.parse(xhr.responseText);
      var result = '';
      for (var i = 0; i < response.tracks.items.length; i++) {
        console.log(response.tracks.items[i]);
        var specifiche = ricercaSpecifiche(response.tracks.items[i].id);    //the call of the second function

        result += '<div class="border"><div class="card-body">' +
          '<img style="float:right;" src=' + response.tracks.items[i].album.images[2].url + '>' +
          'Nome : ' + response.tracks.items[i].name + '<br/>' +
          'Artista : ' + response.tracks.items[i].artists[0].name + '<br/>' +
          'N° Traccia : ' + response.tracks.items[i].track_number + '<br/>' +
          'Tipologia : ' + response.tracks.items[i].type + '<br/>' +
          specifiche + '<br/>' +
          '<iframe src="https://open.spotify.com/embed?uri=' + response.tracks.items[i].uri + '" width="300" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>' + '</div></div>';
      }
      alert
      document.getElementById("artists").innerHTML = result;
    }
  };
  xhr.open('GET', "https://api.spotify.com/v1/search?q=" + artist + "&type=track&market=IT&limit=10&offset=5", true);
  xhr.setRequestHeader('Accept', 'application/json');
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.setRequestHeader('Authorization', 'Bearer ' + token);
  xhr.send();
}

function ricercaSpecifiche(i) {       //the second function
  var token = document.getElementById("token").innerHTML;
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var response = JSON.parse(xhr.responseText);
      var specifiche = '';
      specifiche +=
        'BPM : ' + response.tempo + '<br/>' +
        'Scala : ' + response.key + '<br/>';
    }    
    return specifiche;
  };
  xhr.open('GET', "https://api.spotify.com/v1/audio-features/"+ i, true);
  xhr.setRequestHeader('Accept', 'application/json');
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.setRequestHeader('Authorization', 'Bearer ' + token);
  xhr.send();

}

Answer 1

尝试在方法ricercaSpecifiche

中的此语句中将最后一个参数更改为false

xhr.open('GET', "https://api.spotify.com/v1/audio-features/"+ i, false);

这将导致此调用同步，specifiche变量将具有结果

更新方法：

function ricercaSpecifiche(i) { //the second function
    var token = document.getElementById("token").innerHTML;
    var xhr = new XMLHttpRequest();
    var specifiche = '';

    xhr.open('GET', "https://api.spotify.com/v1/audio-features/" + i, false);
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.setRequestHeader('Authorization', 'Bearer ' + token);
    xhr.send();

    if (xhr.status == 200) {
        var response = JSON.parse(xhr.responseText);

        specifiche +=
        'BPM : ' + response.tempo + '<br/>' +
        'Scala : ' + response.key + '<br/>';
        return specifiche;

    }
}

无法显示功能结果

1 个答案: