带有 JavaScript 的 Youtube API - 显示播放列表中的所有视频答案

【问题标题】：Youtube API with JavaScript - Show all videos from a playlist带有 JavaScript 的 Youtube API - 显示播放列表中的所有视频
【发布时间】：2018-10-27 19:46:49
【问题描述】：

我正在尝试使用以下代码从 Youtube 播放列表中获取所有 137 个视频：

function loadVideos() {

  let pagetoken = '';
  let resultCount = 0;
  const mykey = "***********************************";
  const playListID = "PLzMXToX8Kzqggrhr-v0aWQA2g8pzWLBrR";

  const URL =  `https://www.googleapis.com/youtube/v3/playlistItems?
part=snippet
&maxResults=50
&playlistId=${playListID}
&key=${mykey}`;


  fetch(URL)
    .then(response => {
      return response.json();
    })
    .then(function(response) {

      resultCount = response.pageInfo.totalResults;
      console.log("ResultCount: " + resultCount);

      pagetoken = response.nextPageToken;
      console.log("PageToken: " + pagetoken);

      resultCount = resultCount - 50;
      console.log("ResultCount: " + resultCount);

      while (resultCount > 0) {

        const URL = `https://www.googleapis.com/youtube/v3/playlistItems?
part=snippet
&maxResults=50
&playlistId=${playListID}
&key=${mykey}
&pageToken=${pagetoken}`;

        fetch(URL)
          .then(response => {
            return response.json();
          })
          .then(function(response) {
            pagetoken = response.nextPageToken ? response.nextPageToken : null;
            console.log("PageToken: " + pagetoken);
          });
        resultCount = resultCount - 50;
      }
    })
    .catch(function(error) {
      console.log("Looks like there was a problem: \n", error);
    });
} // End of loadVideos function

// Invoking the loadVideos function
loadVideos();

加载前 50 个视频后 50 个视频也被加载但是，我的脚本没有从列表中加载剩余的 37 个视频，而是再次加载了之前的 50 个视频。

pagetoken 似乎没有为第三个请求更新。

我的代码有什么问题？

【问题讨论】：

我仍在努力寻找解决方案。任何帮助将不胜感激。

标签： javascript api youtube

【解决方案1】：

您无需使用50 - maxResults 进行数学运算，只需查找nextPageToken 并在有新令牌时让代码调用该api。

举例

function getUrl(pagetoken) {
  var pt = (typeof pagetoken === "undefined") ? "" :`&pageToken=${pagetoken}`,
      mykey = "************",
      playListID = "PLzMXToX8Kzqggrhr-v0aWQA2g8pzWLBrR",
      URL = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=${playListID}&key=${mykey}${pt}`;
  return URL;
}


function apiCall(npt) {
  fetch(getUrl(npt))
  .then(response => {
      return response.json();
  })
  .then(function(response) {
      if(response.error){
        console.log(response.error)
      } else {
        responseHandler(response)
      }

  });
}

function responseHandler(response){
  if(response.nextPageToken)
    apiCall(response.nextPageToken);

  console.log(response)
}
apiCall();

如果您看到 api 进行了 3 次调用，因为在第三次之后没有 nextPageToken

【讨论】：

哇！我一直都知道必须有更好的方法来做到这一点。您的代码示例非常棒，正是我想要的。非常感谢。

【解决方案2】：

您在不等待响应的情况下循环异步函数。尝试在函数声明前添加 async 并在 fetch 前等待...

function loadVideos() {
// ...

    .then(async function(response) {
    // ...

        while (resultCount > 0) {
        // ...

            await fetch(URL)
                .then(response => {
                // ...

或者，如果您的设置不支持异步/等待，请使用 bluebird 的 Promise.mapSeries 和一个长度 = resultCount 的空数组，例如 this

【讨论】：

如果我使用异步等待我得到这个错误：等待是一个保留字。
@user1941537 哦，对了，你需要在第二个函数声明前面加上 async。我编辑了答案，如果您的环境支持异步/等待，这应该可以工作。

【解决方案3】：

我建议您从代码中删除您的 API KEY 并简单地放置其他标志或将其留空以供其他人理解。

【讨论】：