我正在使用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来编译脚本。
答案 0 :(得分: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
}