Spotify Web API调用异常求助：点击按钮无响应

阿华AIGC实验室

2026-5-29

问题排查与修复方案

我帮你梳理一下代码里的几个关键问题，这些就是导致点击按钮无反应的核心原因：

1. 请求发起时机完全错误

你的代码里，xhr.open()和xhr.send()是在全局脚本里直接执行的——页面一加载就自动发送了请求，而processRequest函数只有点击按钮时才会触发。等你点按钮的时候，请求可能早就完成或者失败了，函数里的状态判断自然不会生效。

2. 没给请求绑定状态变化监听

XMLHttpRequest需要绑定onreadystatechange或者onload事件，才能在请求状态变化时自动触发处理逻辑。你现在的写法是只有点击按钮才去检查状态，这时候请求状态大概率已经不是你预期的了。

3. 请求头格式写错了

setRequestHeader的第一个参数是HTTP头的名称，不需要带冒号和空格。比如你写的'Accept: '应该改成'Accept'，冒号是HTTP协议里头的格式，但这个方法只需要传纯头名就行。

4. 页面缺少目标DOM元素

代码里尝试给id="artists"的元素设置内容，但你的HTML里根本没有这个元素，执行到这一步会直接报错，打断后续逻辑。

5. 响应处理的细节问题

response.artists是一个包含items数组的对象，直接用alert()会显示[object Object]，根本看不到有效内容；
this.responseText在processRequest里的this指向的是按钮元素，不是xhr对象，应该用xhr.responseText。

修复后的完整代码

<!DOCTYPE html>
<html>
<head>
    <title>Spotify API Demo</title>
</head>
<body>
    <button type="button" onclick="processRequest()">Try it</button>
    <!-- 添加用于展示结果的DOM元素 -->
    <div id="artists"></div>
    <div id="tracks"></div>

    <script>
        function processRequest() {
            var xhr = new XMLHttpRequest();
            // 绑定请求状态变化监听
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var response = JSON.parse(xhr.responseText);
                    // 用控制台打印完整响应，方便调试
                    console.log('完整响应数据:', response);
                    
                    // 渲染艺人信息
                    if (response.artists && response.artists.items.length > 0) {
                        let artistHtml = '<h3>找到的艺人:</h3><ul>';
                        response.artists.items.forEach(artist => {
                            artistHtml += `<li>${artist.name} (粉丝数: ${artist.followers.total})</li>`;
                        });
                        artistHtml += '</ul>';
                        document.getElementById("artists").innerHTML = artistHtml;
                    }
                    
                    // 渲染曲目信息
                    if (response.tracks && response.tracks.items.length > 0) {
                        let trackHtml = '<h3>找到的曲目:</h3><ul>';
                        response.tracks.items.forEach(track => {
                            trackHtml += `<li>${track.name} - 专辑: ${track.album.name}</li>`;
                        });
                        trackHtml += '</ul>';
                        document.getElementById("tracks").innerHTML = trackHtml;
                    }
                } else if (xhr.readyState == 4) {
                    // 处理请求失败的情况，方便排查问题
                    alert(`请求失败，状态码: ${xhr.status}`);
                    console.log('错误响应内容:', xhr.responseText);
                }
            };

            xhr.open('GET', "https://api.spotify.com/v1/search?q=Muse&type=track,artist&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();
        }
    </script>
</body>
</html>