我正在使用 node.js 服务器、Spotify API 和 spotify-web-api-js node 模块创建一个 web 应用程序，用户可以在其中输入艺术家的名字，查看相关艺术家的歌曲列表，然后可选择将该播放列表保存到他们自己的 Spotify 帐户。但是，我在最后一步仍然遇到问题。

我的用户授权流程首先发生:

if (params.access_token) {

    s.setAccessToken(params.access_token);

    s.getMe().then(function(data) {

      console.log(data);
      console.log(data.id);
      user_id = data.id;

在它下面是 API 收集歌曲的实际细节的地方。尽管它较低，但它首先发生，并且只有当用户单击该页面上的第二个按钮时才会发生用户授权。

async.times(counter, function(n, next){
        s.getArtistTopTracks(relatedArtists[n].id, "US", function (err, data2) {
          relatedArtists[n].song = data2.tracks[0].name;
          relatedArtists[n].uri = data2.tracks[0].uri;
          console.log(relatedArtists[n].uri);
          // make sure to put the access token here add song to playlist
          // create array
          song_uris.push(relatedArtists[n].uri);
          console.log(song_uris);

          // song_uris = relatedArtists[n].uri;
          //
          // console.log(song_uris);

          next(null);

      $("#playlist").load(function() {
            s.addTracksToPlaylist(user_id, playlist_id, song_uris);
          });
        });


      }, function(err) {
        // console.table(relatedArtists);

        for (k = 0; k < 20; k++)
        {
          $('#related-artist').append('<p><strong>' + relatedArtists[k].name + '</strong> -- \"' + relatedArtists[k].song + '\"</p>');


        }

( JSBin of full code here ，虽然它可能不起作用，因为我在自己的服务器上使用 browserify)

现在，在第 114 行，我有 song_uris.push(relatedArtists[n].uri); 使用 async.times 将内容插入数组。由于这是我在第 66 行创建播放列表的位置下方，因此它显示为一个空数组:

 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(song_uris);


       });

那里，console.log(song_uris) 显示一个空数组，所以 addTracksToPlaylist() 像这样中断:

另一方面，如果我尝试在下面addTracksToPlaylist()，我没有访问用户帐户的授权。

在显示歌曲列表的基本功能已经正常工作之后，稍后添加了用户授权流程，但我不确定如何有效地重构它以便将该列表保存到我的用户的播放列表中。目前，我只是在 Spotify 帐户中创建一个空的播放列表。

我可以添加什么样的事件监听器，以便它等待直到执行每个 async.times 实例，以便 addTracksToPlaylist() 可以工作？在我获取此数据之前，DOM 已经初始加载。我看了this question ，但它并没有完全帮助我解决这个问题。谢谢!

编辑:我现在已经按照我需要的方式创建了 song_uri 数组，但我仍然无法将它放入播放列表。我一直在研究我的访问 token 的位置，以便我可以访问创建的播放列表，但仍然没有成功。

第 130 行的 console.log(song_uris); 语句显示了我需要的完整数组，但是当我将它插入到 s.addTracksToPlaylist(user_id, playlist_id, song_uris); 时 我在开发人员控制台中收到以下错误:

POST https://api.spotify.com/v1/users/tenderoni-/playlists/7MtQTzUsxD4IEJ8NmmE36q/tracks?uris= 400 (Bad Request)
bundle.js:10616
Uncaught (in promise) XMLHttpRequest {}

基本上，由于某种原因它没有接收到参数。我事先记录了 playlist_id，所以我可以知道它正在工作(另外，我看到在我的 Spotify 帐户中创建了具有指定标题的空白播放列表)。

完整的更新代码在这里:https://github.com/yamilethmedina/cs50xmiami/blob/master/assignments/portfolio/public/scripts.js

最佳答案

async.times 的回调参数可以采用第二个“results”参数，因此如果您使用 song_uri 调用“next”，您将绕过循环的每一圈，您可以在最后获得 song_uris，通过回调传递搜索艺术家，并在那里使用它。骨架版本:

$(document).ready(function($) {
    $('#s').on('submit', function() {
        searchArtists($('#originalartist').val(), function(err, song_uris) {
            if (params.access_token) {
                // omitted
                s.setAccessToken(params.access_token);
                s.getMe().then(function(data) {
                    console.log(data);
                    console.log(song_uris);
                });
            }
        });
        return false;
    });
})

function searchArtists(originalArtist, callback) {
    s.getArtistRelatedArtists(originalArtistId, function(err, data) {
        async.times(counter, function(n, next) {
            // omitted
            next(related_artists[n].uri)
        }, function(err, song_uris) {
            callback(err, song_uris);
        });

    });

}

关于javascript - 如何选择一个事件监听器，让我等到 async.times 完成运行一个函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33421751/