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

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

     });

   });
 });
}

然而，一旦人们通过可选的 login/callback 过程，我就得到了所有用户的数据（包括新的播放列表 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:

范围 and/or 异步显然存在问题，但我似乎无法弄清楚将 addTracksToPlaylist 放在哪里。将它紧跟在 console.log 输出完整数组的行之后要么不执行任何操作（如果它在 window.onhashchange = function () 内），要么给出错误，因为用户和播放列表在回调之前未定义（如果addTracksToPlaylist 函数单独存在）。

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

我用完整的 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 is nearly universally supported.

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

Saved (globally defined) array is emptied after callback

javascript

arrays

jquery

asynchronous

spotify