如何在使用延迟对象的多个 $.get() 请求后执行代码？

Question

我很难在执行全部结果之前先执行多个 $.get() 请求。我有一个获取所有 50 个视频（最多）的请求，然后执行第二个请求（使用相同的 $.get() 请求，但 pageToken 与上一个请求不同）检索接下来的 50 个视频。现在，问题出在第二个请求完成之后。在第二个请求完成后，我试图打印出从两个请求的总值数组中存储的结果，但我碰壁了。

问题：

// when first request is resolved, do a second request
$.when(testGetPlaylists(deferredFunc)).done(function()
{
   testGetPlaylists(playlistId, globalPageToken, deferredFunc); // run second request...WORKS FINE

   // doesn't work as it gets the same promise resolved from the first request and executes this function too
   $.when(testGetPlaylists(deferredFunc)).done(function()
   {
      console.log("second request has completed! Logging total values from both requests...");
   });
});

也试过：（但报错：TypeError: testGetPlaylists(...) function is not defined）

// when first request is resolved, do a second request
$.when(testGetPlaylists(deferredFunc)).done(function()
{
   testGetPlaylists(playlistId, globalPageToken, deferredFunc).done(function()
   {
      console.log("second request has completed! Logging total values from both requests...");
   });
});

jQuery:

// func to retrieve each video information
function testGetPlaylists(playlistId, pageToken, deferredFunc)
{
    $.get(
        "https://www.googleapis.com/youtube/v3/playlistItems",
        {
            part: 'snippet',
            maxResults: vidResults
            playlistId: playlistId,
            pageToken: pageToken,
            key: 'XXXXXXXXXXXXX'
        },

        // print the results
        function(data)
        {
            $.each(data.items, 
                function(i, item) 
                {
                    console.log(item);
                    var vidTitle = item.snippet.title; // video title
                    var vidDesc = item.snippet.description; // video description
                    var videoId = item.snippet.resourceId.videoId; // video id
                    var vidThumbUrl = item.snippet.thumbnails.medium.url; // video thumbnail url
                    globalPlaylistId = playlistId; 
                    globalPageToken = pageToken;

                    // code that gets all the video info stored into an array ...
                }
            );
            // keep track of page token position
            prevPageToken = data.prevPageToken; 
            nextPageToken = data.nextPageToken;
            globalPageToken = nextPageToken;
        }
    ).done(function() // execute after initial request is complete
    {
        d1.resolve(); // resolve when get request is successful
        deferredFunc = d1; // pass to parameter
        return d1.promise(); // return done
        }).fail(function()
        {
            d1.reject();  //reject if get request fails
            console.log("Could not fetch the videos.");
        });
    });
}

文档就绪：

$(document).ready(function()
{
    $.get( // get channel name and load data
        "https://www.googleapis.com/youtube/v3/channels",
        {
            part: 'contentDetails',
            forUsername: channelName,
            key: 'XXXXXXXXXX'
        },

        function(data)
        {
            $.each(data.items,
                  function(i, item) 
                  {
                     console.log(item); // log all items to console
                     var playlistId = item.contentDetails.relatedPlaylists.uploads;

                     testGetPlaylists(playlistId); // initial loading playlist

                     // when first request is resolved, do a second request
                     $.when(testGetPlaylists(deferredFunc)).done(function()
                     {
                         testGetPlaylists(playlistId, globalPageToken, deferredFunc); // run second request

                         $.when(testGetPlaylists(deferredFunc)).done(function()
                         {
                            console.log("second request has completed! Logging total values from both requests...");
                         });
                     });
                 }
            );
        }         
    );
});

Answer 1

我认为您的问题源于依赖单个延迟，d1。 IIrc，仅延迟 resolve/reject 一次，因此您重用它的逻辑将成为问题的一部分。

我建议首先将您的方法 testGetPlaylists(playlistId, pageToken) 更改为类似 testGetPlaylists(playlistId, pageToken, aDeferred) 的方法，这样您就可以传递延迟并引用该参数而不是全局 d1 .这将允许您创建多个 deferred 并为您的目的重用该方法。

我会详细说明一些。您想要拨打两个电话，但您希望第二个电话等待第一个电话。并且您使用自己的延迟而不是从 $.ajax() 返回的延迟，因为您已经完成了一些事情。所以从逻辑上讲，这些步骤应该是...

var firstRequestDeferred = $.Deferred();
testGetPlaylists(playlistId, globalPageToken, firstRequestDeferred);

$.when(firstRequestDeferred).then(function() {
    console.log('First request finished');
    var secondRequestDeferred = $.Deferred();
    testGetPlaylists(playlistId, globalPageToken, secondRequestDeferred);

    $.when(secondRequestDeferred).then(function() {
        console.log("Second request finished");
        //do other stuff
    });
});

类似的东西。

如何在使用延迟对象的多个 $.get() 请求后执行代码？

How to execute code after multiple $.get() requests using a deferred object?

jquery

asynchronous

youtube-api

jquery-deferred

.when