与异步代码和承诺作斗争

Question

我正在使用 Spotify SDK 创建一个网络播放器。 这样做时，每次单击播放器中的任何播放按钮时，我都想执行 sdk 函数： player.getCurrentState()以获取当前播放曲目的新专辑封面、曲目名称和艺术家名称。 收到结果后，我希望 HTML 结构中的当前元素进行相应的更改。 但是，如果第一次按下，歌曲会正常播放，但会显示错误消息，但第二次按下时，元素会相应更改。 之后，当我不断在不同曲目之间切换时，变化总是滞后一键。 我希望这是由于异步代码，但我无法在 javascript 中掌握这种异步性。

document.getElementById("playbtn").addEventListener("click", function () {
           const play = ({spotify_uri, playerInstance: {_options: {getOAuthToken, id}}}) => {
                getOAuthToken(access_token => {
                    fetch(`https://api.spotify.com/v1/me/player/play?device_id=${id}`, {
                        method: 'PUT',
                        body: JSON.stringify({uris: [spotify_uri]}),
                        headers: {
                            'Content-Type': 'application/json', 'Authorization': `Bearer ${access_token}`
                        },
                    });
                });
            };
            play({
                playerInstance: player,
                spotify_uri: 'spotify:track:14iN3o8ptQ8cFVZTEmyQRV',
            });
            update();
}, false);


function update(){
        player.getCurrentState().then(state => {
            if (!state) {
                console.error('User is not playing music through the Web Playback SDK');
                return;
            }
            document.getElementById("album").src = state.track_window.current_track.album['images'][2]["url"];
            document.getElementById("trackname").innerHTML = state.track_window.current_track['name'];
            document.getElementById("artistname").innerHTML = state.track_window.current_track['artists'][0]['name'];
        });
}

我也尝试了 async 和 await 函数，但这给出了相同的结果。 帮助表示赞赏！

Spotify 文档： https : //developer.spotify.com/documentation/web-playback-sdk/reference/#api-spotify-player-getcurrentstate

我还认为在我问的上一个问题中出现了同样类型的异步问题： 再次使用相同的函数时，不会将记录添加到 PouchDB 中

Answer 1

你一键落后的问题是因为没有加载新歌，也没有更新播放器。 在下面的演示中，我添加了player.addListener('player_state_changed', update); 在主函数中，因此事件将触发您的更新方法。

 var player = null; function update(changedStateEvent) { console.log(changedStateEvent); player.getCurrentState().then(state => { if (!state) { console.error('User is not playing music through the Web Playback SDK'); return; } document.getElementById("album").src = state.track_window.current_track.album['images'][2]["url"]; document.getElementById("trackname").innerHTML = state.track_window.current_track['name']; document.getElementById("artistname").innerHTML = state.track_window.current_track['artists'][0]['name']; }); } const play = ({ spotify_uri, playerInstance: { _options: { getOAuthToken, id } } }) => { getOAuthToken(access_token => { fetch(`https://api.spotify.com/v1/me/player/play?device_id=${id}`, { method: 'PUT', body: JSON.stringify({ uris: [spotify_uri] }), headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${access_token}` }, }); }); }; window.onSpotifyWebPlaybackSDKReady = () => { // You can now initialize Spotify.Player and use the SDK player = new Spotify.Player({ name: 'Carly Rae Jepsen Player', getOAuthToken: callback => { // Run code to get a fresh access token callback('access token here'); }, volume: 0.5 }); // use events // https://developer.spotify.com/documentation/web-playback-sdk/reference/#event-player-state-changed player.addListener('player_state_changed', update); } document.getElementById("playbtn").addEventListener("click", function() { play({ playerInstance: player, spotify_uri: 'spotify:track:14iN3o8ptQ8cFVZTEmyQRV', }); }, false);