Question

我正在使用spotify-web-api-js节点模块，JavaScript和jQuery登录用户的Spotify帐户并将一系列曲目保存到新创建的播放列表中，但到目前为止我只能获得一个空白播放列表已创建。

我通过API收集所有曲目并将其放入全局定义的数组中，因为我向用户显示了列表。此数组在第39行定义：var song_uris = []; console.log显示此数组在此函数之后填充了我需要的URI，这在初始搜索时发生：

function searchArtists(originalArtist, callback) {
    $(window).on('hashchange', function() {
      console.log(window.location.hash);
    });
  console.log('originalArtist', originalArtist);
  $.getJSON("https://api.spotify.com/v1/search?type=artist&q=" + originalArtist, function(json) {

    $('#artist').html('<p>'+ '<img src="' + json.artists.items[0].images[2].url + '" height="100" width="100" /> ' + json.artists.items[0].name +'</p>');

    var originalArtistId = json.artists.items[0].id;
    s.getArtistRelatedArtists(originalArtistId, function(err, data) {
      relatedArtists = {};

      for (var i = 0; i < data.artists.length; i++) {
        relatedArtists[data.artists[i].id] = {};
        relatedArtists[data.artists[i].id].name = data.artists[i].name;
        relatedArtists[data.artists[i].id].id = data.artists[i].id;
      }



      var counter = 0;
      for (var id in relatedArtists) {
        relatedArtists[counter] = relatedArtists[id];
        delete relatedArtists[id];
        counter++;
      }

        async.times(counter, function(n, next) {
          console.log(n);
          console.log(relatedArtists[n].id);
          s.getArtistTopTracks(relatedArtists[n].id, "US", function (err, data2) {
            relatedArtists[n].song = data2.tracks[0].name; //sometimes this is a TypeError? idk
            relatedArtists[n].uri = data2.tracks[0].uri;

            $('#related-artist').append('<p><strong>' + relatedArtists[n].name + '</strong> -- \"' + relatedArtists[n].song + '\"</p>');
            song_uris.push(relatedArtists[n].uri);

            next(null, relatedArtists[n].uri);

          });

        }, function(err, song_uris) {


          console.log(song_uris); //array is full here

     });

   });
 });
}

但是，只要人们通过可选的登录/回调过程，我就会获得所有用户的数据（包括新的播放列表URI），但我之前拥有的song_uris数组现在是空。

if (params.access_token) {

          s.setAccessToken(params.access_token);
          s.getMe().then(function(data) {

            // and here it goes the user's data!!!
            console.log(data);
            console.log(data.id);
            user_id = data.id;

            s.createPlaylist(user_id, {name: 'Related Artist Playlist'}).then(function(data3) {
              console.log(data3);
              playlist_id = data3.uri;
              playlist_id = playlist_id.substring(33);
              console.log(playlist_id);
              console.log(user_id);
              console.log(song_uris); //array is empty here





              s.addTracksToPlaylist(user_id, playlist_id, song_uris).then(function(data){
                  console.log(data);
                });

        });
      });
    }

由于这是addTracksToPlaylist函数的参数之一，因此XML请求不起作用。

以下是我的控制台的屏幕截图，其中我看到了失败的POST请求和uncaught exception: object XMLHttpRequest：

范围和/或异步显然存在问题，但我似乎无法确定放置addTracksToPlaylist的位置。在console.log输出完整数组的行之后立即放置它不会做任何事情（如果它在window.onhashchange = function ()内），或者因为用户和播放列表是错误而给出错误在回调之前未定义（如果addTracksToPlaylist函数单独存在）。

网站刷新后回调时数据是否被覆盖？如果是这样，我怎么能阻止它，所以我有一整套适合URL字符串的URI？（根据Spotify Developer docs，URL应该具有逗号分隔的轨道URI列表（在我的数组中）通过uri参数传递给它，但由于空数组，它会中断并且我得到https://api.spotify.com/v1/users/account/playlists/5kxeeKym1tpEx8Trj3qkd5/tracks?uris=（使用空参数）。我该如何解决这个问题？或者是否有另一种方法来保持搜索艺术家所需的用户流程 - ＆gt;参见相关艺术家的歌曲列表 - ＆gt;（可选）登录Spotify帐户 - ＆gt;（可选）将相关艺术家的歌曲列表保存到新播放列表？

我已经使用完整的JS和HTML代码创建了一个jsfiddle：https://jsfiddle.net/37Lkrcb1/1/

注意：这是在Node.js服务器上运行的，我使用bundle和browserify来编译脚本。

Answer 1

听起来您的应用中至少有一条路径会涉及您无法避免的页面刷新（去Spotify并回来）。在这种情况下，页面加载将重置所有变量。

如果您希望在重新加载时保持song_uris，则可以在Spotify身份验证之前将其存储在sessionStorage（或localStorage）中，并在页面加载时检索它们

存储它：

sessionStorage.setItem("song_uris", JSON.stringify(song_uris));
// Or localStorage.setItem...

在页面加载时检索它：

var song_uris = JSON.parse(sessionStorage.getItem("song_uris") || "null");
if (!song_uris) {
    // There weren't any in storage, populate in another way or set dfeault
}

Web storage是nearly universally supported。

保存（全局定义）数组在回调后清空

1 个答案: