无法显示函数的结果

Question

我正在尝试创建一个站点，在该站点中，我通过 Spotify Web API 显示某个元素（艺术家、曲目、专辑等）的信息。 在我搜索歌曲的函数中，我调用另一个函数，该函数应该对歌曲的更具体信息（时间、键 ....）提出请求，并返回要与第一个函数的结果一起打印的结果. 问题是当我去打印第二个函数的结果时，它给了我“未定义”的答案。 我认为第二个功能的请求是成功的，因为控制台没有给我错误。有人可以帮我了解错误在哪里吗？

    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;

    }
}