Spotify Web API，我做错了什么？答案

【问题标题】：Spotify Web API, What am I doing wrong?Spotify Web API，我做错了什么？
【发布时间】：2018-05-30 17:53:42
【问题描述】：

我正在尝试创建一个站点，在该站点中，我通过 Spotify Web API 显示某个元素（艺术家、曲目、专辑等）的信息。软件开发经验不是很丰富，靠网上的指南，写了如下代码，但没有给出结果

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
    <button type="button" onclick="processRequest()">Try it</button>

    <script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "https://api.spotify.com/v1/search?q=Muse&type=track%2Cartist&market=US&limit=10&offset=5", true);
    xhr.setRequestHeader('Accept: ', 'application/json');
    xhr.setRequestHeader('Content-Type: ', 'application/json');
    xhr.setRequestHeader('Authorization: ', 'Bearer BQDWk5QhO-CDvXu6nYDbSMP_nubWIMDH6HDX5hPaQlGWIhim4f2qcCJADFVSePyhhCLklKgyXKhPIyRUWa_RpbB97lKKnQHoq4r3ahfw4friE8-fw8gcvchHGDdYv6PuLp1yXDYooNwuNuG-MDhub2WnNj-SUd9W6SadBOhJMeDabIXIWfVMizjeTdldIsNDriPznZnDB4vFTQ4oYfHrSIfh_D9M9noALwOY2cptpC_dKaF7reI-WN1nAEbgGewqTAmtNaOEEuY');
    xhr.send();

    function processRequest(e) {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var response = JSON.parse(xhr.responseText);
        alert(response.artists);
        document.getElementById("artists").innerHTML = this.responseText;
    }
}
    </script>


</body>
</html>

唯一出现的是按钮，但如果我按下它，绝对没有任何反应。我希望你能帮助我。

【问题讨论】：

.setRequestHeader() 只需要名称作为第一个参数 -> .setRequestHeader("Accept", ...)
你收到了什么就绪状态、响应码和响应消息？
在@Andreas 建议的更正之后，现在我收到了警报，但它说“未定义”

标签： javascript spotify

【解决方案1】：

你快到了。正如其他人指出的那样，主要问题是'Accept'。

您可以在Full Page中运行以下代码。

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
	
    <button type="button" onclick="processRequest()" class="btn btn-primary">Try it</button>
	<div id="artists"></div>
	
    <script>
    /*var spotifyApi = new SpotifyWebApi();
    spotifyApi.setAccessToken('BQDSL01Fr_kd_cph_LVSymXBJu_0gEq75IC3zTSki4eSg_Uwum5tTDUm0d8tvyCQpaXSkfxR32ABFV7sgAZfHUKqMJXLkedeSLDF6v5mU98y3mnlYWZt1wQ_mWhPCTqXCZv-Vt_PWbyxZ-fHQy5Ryp5xby2EBqVTkQ&refresh_token=AQD1ZUVO6xgq7Ol-__h1aE0zf0iqVjsKxzr062CteUsmJZHWA-kT6ebcFpD89D-Qbet99qcbEftR_RrReDvLnWxmK6S4CrjcxFbFXzInLKK-v0JxPNTI6ejC15BBtmlwTAw');*/
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "https://api.spotify.com/v1/search?q=Muse&type=track%2Cartist&market=US&limit=10&offset=5", true);
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.setRequestHeader('Authorization', 'Bearer BQDWk5QhO-CDvXu6nYDbSMP_nubWIMDH6HDX5hPaQlGWIhim4f2qcCJADFVSePyhhCLklKgyXKhPIyRUWa_RpbB97lKKnQHoq4r3ahfw4friE8-fw8gcvchHGDdYv6PuLp1yXDYooNwuNuG-MDhub2WnNj-SUd9W6SadBOhJMeDabIXIWfVMizjeTdldIsNDriPznZnDB4vFTQ4oYfHrSIfh_D9M9noALwOY2cptpC_dKaF7reI-WN1nAEbgGewqTAmtNaOEEuY');
    xhr.send();

    function processRequest(e) {
       if (xhr.readyState == 4 && xhr.status == 200) {
          var response = JSON.parse(xhr.responseText);
          var result = '';
          for(var i = 0; i < response.artists.items.length; i++){
             console.log(response.artists.items[i]);				
             result += '<div class="panel panel-primary"><div class="panel-body">' + 
             'name : ' + response.artists.items[i].name + '<br/>' + 					
             'popularity : ' + response.artists.items[i].popularity + '<br/>' + 
             'type : ' + response.artists.items[i].type + '</div></div>';
          }	
          document.getElementById("artists").innerHTML = result;
       }
	}
    </script>


</body>
</html>

【讨论】：

【解决方案2】：

问题正是您的控制台所说的：'Content-Type: ' is not a valid HTTP header field name.。为了解决这个问题，将这些更改为行：

xhr.setRequestHeader('Content-Type: ', 'application/json');
xhr.setRequestHeader('Authorization: ', 'Bearer BQDWk5QhO-CDvXu6nYDbSMP_nubWIMDH6HDX5hPaQlGWIhim4f2qcCJADFVSePyhhCLklKgyXKhPIyRUWa_RpbB97lKKnQHoq4r3ahfw4friE8-fw8gcvchHGDdYv6PuLp1yXDYooNwuNuG-MDhub2WnNj-SUd9W6SadBOhJMeDabIXIWfVMizjeTdldIsNDriPznZnDB4vFTQ4oYfHrSIfh_D9M9noALwOY2cptpC_dKaF7reI-WN1nAEbgGewqTAmtNaOEEuY');

到：

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer BQDWk5QhO-CDvXu6nYDbSMP_nubWIMDH6HDX5hPaQlGWIhim4f2qcCJADFVSePyhhCLklKgyXKhPIyRUWa_RpbB97lKKnQHoq4r3ahfw4friE8-fw8gcvchHGDdYv6PuLp1yXDYooNwuNuG-MDhub2WnNj-SUd9W6SadBOhJMeDabIXIWfVMizjeTdldIsNDriPznZnDB4vFTQ4oYfHrSIfh_D9M9noALwOY2cptpC_dKaF7reI-WN1nAEbgGewqTAmtNaOEEuY');

【讨论】：

【解决方案3】：

尝试查看控制台以供将来参考。

您的第一个错误是您不应该在第一个参数中包含冒号:。

其次，您从不设置 onload 处理程序。没有这个，xhr 对象不知道如何处理您检索到的数据。

最后，不建议使用alert，因为它不会记录整个响应。使用console.log，然后检查控制台。

var xhr = new XMLHttpRequest();
xhr.open('GET', "https://api.spotify.com/v1/search?q=Muse&type=track%2Cartist&market=US&limit=10&offset=5", true);
xhr.setRequestHeader('Accept', 'application/json');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer ...');
xhr.send();

xhr.onload = function processRequest(e) {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response)
    //document.getElementById("artists").innerHTML = this.responseText;
  }
}

【讨论】：

xhr.onload 不是必需的，因为他将processRequest 函数附加为事件侦听器。
是的。但我会小心这样做。想象一下响应没有准备好但是按钮被点击的场景。什么都不会发生，除非您不断重复单击该按钮，否则您将无法知道响应已准备好。
我也没有看到将processRequest 设置为按钮的事件侦听器而不是 xhr 对象本身的优势，因为它在第一次按下后实际上不会做任何有意义的事情响应不会改变。