Борьба с асинхронным кодом и обещаниями

Question

Я создаю веб-плеер с помощью SDK для spotify. При этом каждый раз, нажимая любую кнопку воспроизведения в плеере, я хочу выполнить функцию 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'];
        });
}

Я также пробовал функции asyn c и await, но это дает то же самое результат. Помощь приветствуется!

Документация Spotify: https://developer.spotify.com/documentation/web-playback-sdk/reference/#api -spotify-player-getcurrentstate

Я также думаю, что аналогичные асинхронные проблемы появляются в предыдущем вопросе I спросил: Не добавляет записи в 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);