YouTube API с JavaScript - Показать все видео из плейлиста

Question

Я пытаюсь получить все 137 видео из плейлиста Youtube со следующим кодом:

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 не обновляется для третьего запроса.

Что не так с моим кодом?

Answer 1

Вам не нужно создавать Math с 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

Answer 2

прошу вас удалить код API KEY из кода и просто поставить другие знаки или оставить его пустым для понимания других.

Answer 3

Вы просматриваете асинхронные функции, не ожидая ответа.Попробуйте добавить async перед объявлением функции и ожидать перед извлечением ...

function loadVideos() {
// ...

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

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

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

Или, если ваша установка не поддерживает асинхронное / ожидание, используйте bluebird's Promise.mapSeries с пустым массивом длины = resultCount, что-то вроде this