YouTube API V3，多个 youtube.playlistItems.list 请求的顺序不同答案

【问题标题】：YouTupe API V3, multiple youtube.playlistItems.list requests not in the same orderYouTube API V3，多个 youtube.playlistItems.list 请求的顺序不同
【发布时间】：2017-02-17 18:37:43
【问题描述】：

我正在使用 javascript youtube API 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() 方法正在异步请求信息，但如果这是正确的，我应该怎么做才能在请求中设置顺序？

【问题讨论】：

标签： javascript youtube-api youtube-javascript-api youtube-data-api

【解决方案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

你可以找到一个 Fiddle here

【讨论】：