无法显示函数的结果

Question

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

    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

尝试将方法中此语句中的最后一个参数更改为 false ricercaSpecifiche

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;

    }
}

无法显示函数的结果

Cannot display result of a function

javascript

json

spotify