YouTupe API V3, несколько запросов youtube.playlistItems.list не в том же порядке

Question

Я использую API javascript youtube v3 для запроса 3 разных плейлистов в некоторых видео данных. Он успешно работает, но метод execute() запрашивает видеоданные из порядка, который был вызван в цикле (обновите page). Код очень прост и может быть отлажена here, или при желании здесь:

var playlistsID = [...] 
for (var i = 0; i < playlistsID.length; i++) { 
    function playlistItem() { 
    var request = gapi.client.youtube.playlistItems.list({ 
     part: 'snippet', 
     playlistId: playlistsID[i], 
     maxResults: 4 
    }); 

    request.execute(function(response) { 
     if ('error' in response) { 
     console.log(response.error.message); 
     } 
     else { 
     for (var j = 0; j < response.items.length; j++) { 
      showVideo(response.items[j]); 
     } 
     } 
    }); 
    } 
} 

function showVideo(response) { 
    var videoThumb = response.snippet.thumbnails.medium.url, 
     container = document.getElementById("video-container"), 
     videoDiv = document.createElement("div"), 
     image = document.createElement("img"); 
    image.setAttribute("src", videoThumb); 
    container.appendChild(videoDiv); 
    videoDiv.appendChild(image); 
} 

Моя теория состоит в том, что метод execute() запрашивает информацию асинхр, но если это правильно, что я должен сделать, чтобы установить порядок в запросах?

Answer 1

Вы можете использовать Javascript Promise ждать асинхронного запроса должны быть выполнены и использовать Bluebird библиотеку цикла их в правильном порядке, от этого post:

var promiseFor = Promise.method(function(condition, action, value) { 
    if (!condition(value)) return value; 
    return action(value).then(promiseFor.bind(null, condition, action)); 
}); 

//Load and grant access to youtube api 
function googleApiKey() { 

    var apiKey = 'YOUR_API_KEY'; 
    gapi.client.setApiKey(apiKey); 
    gapi.client.load('youtube', 'v3', function() { 

    promiseFor(function(count) { 
     return count < playlists.length; 
    }, function(count) { 
     return requestVideo(playlists[count]) 
     .then(function(response) { 

      //show video 
      for (var j = 0; j < response.items.length; j++) { 
      showVideo(response.items[j]); 
      } 

      return ++count; 
     }, function(error) { 
      console.log(response.error.message); 
     }); 
    }, 0).then(console.log.bind(console, 'all done')); 
    }); 
} 

function requestVideo(playlist) { 

    return new Promise(function(resolve, reject) { 

    var request = gapi.client.youtube.playlistItems.list({ 
     part: 'snippet', 
     playlistId: playlist, 
     maxResults: 4 
    }); 

    request.execute(function(response) { 

     if ('error' in response) { 
     reject(Error(response.error.message)); 
     } 
     else { 
     resolve(response); 
     } 
    }); 
    }); 
} 

Не забудьте добавить bluebird link

You можно найти Fiddle here