Codecademy Spotify播放列表项目API搜索无返回结果求助

核心错误点 #

• 字段名拼写错误：search 方法中读取艺术家名称时，错误调用了 track.artist[0].name，Spotify API 实际返回的艺术家列表字段为 artists，拼写错误会导致取值时触发 undefined 报错，由于代码没有异常捕获逻辑，报错被静默吞掉，所以控制台没有任何错误输出。
• 缺少请求错误处理逻辑：现有代码仅处理了接口正常返回的场景，未校验 HTTP 响应状态、也没有添加 catch 分支捕获异常，接口权限失效、参数非法、请求失败等问题都不会透出提示。
• 搜索参数未做 URL 编码：搜索关键词 term 直接拼接在请求 URL 中，若关键词包含空格、中文或特殊符号，会导致请求参数格式非法，接口无法正常返回结果。

修复后的完整 search 方法代码 #

search(term){
    const accessToken = Spotify.getAccessToken();
    // 对搜索关键词做URL编码
    const encodedTerm = encodeURIComponent(term);
    return fetch(`https://api.spotify.com/v1/search?type=track&q=${encodedTerm}`, {
        headers: {
            Authorization: `Bearer ${accessToken}`
        }
    }).then(response => {
        // 先校验响应状态是否正常
        if (!response.ok) {
            throw new Error(`搜索请求失败，状态码：${response.status}`);
        }
        return response.json();
    }).then(jsonResponse => {
        if (!jsonResponse.tracks){
            return [];
        } 
        return jsonResponse.tracks.items.map(track => ({
            id: track.id,
            name: track.name,
            // 修正artists字段拼写
            artist: track.artists[0].name,
            album: track.album.name,
            uri: track.uri
        }))
    // 添加错误捕获，打印异常信息
    }).catch(err => {
        console.error('Spotify搜索接口异常：', err);
        return [];
    })
},

额外排查项 #

• 确认你填写的 clientId 正确，且在 Spotify 开发者后台已将 http://localhost:3000 添加到重定向地址白名单
• 确认账号授权正常，可在浏览器Application面板查看当前是否拿到了有效access_token

内容的提问来源于stack exchange，提问作者kyledeato