YouTube API 在 IE 上失败答案

【问题标题】：YouTube API failing on IEYouTube API 在 IE 上失败
【发布时间】：2019-10-10 08:24:47
【问题描述】：

我一直在使用 YouTube API 在侧边栏上显示播放列表，如 thread 中所述。我在codepen link 中也给出了完整的代码。

但是，IE 无法显示播放列表。以下是控制台错误。

这是触发错误的那一行

function getPlaylistItems(pageToken) {
        return gapi.client.youtube.playlistItems.list({
            "part": "snippet,contentDetails",
            "maxResults": 50,
            "playlistId": PLAYLIST_ID, 
            pageToken //Error is in this line
        }).then(function(response) {
        const {items, nextPageToken} = response.result;


        playlistItems.push(...items);

        var index = 0;
        items.forEach(function(item) {
            const thumbnailItem = createPlaylistItem(item, index);
            playlist.appendChild(thumbnailItem);
            index++;
        });
        maxVideoVisible = index - 3;

        if (nextPageToken) {
            getPlaylistItems(nextPageToken);
        }
    }, function(err) {
        console.error("Execute error", err);
    });
}

谁能帮我理解这个问题？

谢谢

【问题讨论】：

您使用哪个版本的 IE...因为我不是专业人士但不支持对象解构（我认为）以及 Promises...但也许我错了我只是尝试帮助
pageToken 键没有值
此错误仅在 IE 11 上触发。适用于包括 Microsoft Edge 在内的所有其他浏览器
@ThumChoonTat 它不需要有价值。我在问题中添加了完整的功能
你需要将你的 nextPageToken 应用到 pageToken: nextPageToken

标签： javascript internet-explorer youtube-api

【解决方案1】：

你应该做这样的事情。

gapi.client.youtube.playlistItems.list({
            "part": "snippet,contentDetails",
            "maxResults": 50,
            "playlistId": PLAYLIST_ID, 
            pageToken : NextPageToken 
        }).then(function (response) {
              // if response.result.nextPageToken exists, use it
              if (response.result.nextPageToken) {
                 NextPageToken = response.result.nextPageToken;                        
              } else {
                 NextPageToken = false;
              }
           });

【讨论】：

【解决方案2】：

可以查看YouTube PlaylistItems: list document，pageToken是字符串类型，所以代码如下：

    return gapi.client.youtube.playlistItems.list({
        "part": "snippet,contentDetails",
        "maxResults": 50,
        "playlistId": PLAYLIST_ID, 
        "pageToken" : "<the page token string>" //Error is in this line
    }).then(function(response) {

【讨论】：

【解决方案3】：

我发现了问题。问题是 Internet Explorer 不支持Destructuring assignment。我从这个thread找到了解决方案

所以不是下一行，

const {items, nextPageToken} = response.result;

我们应该重写下面的部分，

const hash = response.result;
items = hash.items,
nextPageToken = hash.nextPageToken;

还有下面一行，

pageToken

应该写成，

"pageToken" : pageToken

以下是最终的固定代码。遇到同样问题的朋友可以使用下面的代码。

    function getPlaylistItems(pageToken) {
        return gapi.client.youtube.playlistItems.list({
            "part": "snippet,contentDetails",
            "maxResults": 50, // This is the maximum available value, according to the Google docs
            "playlistId": PLAYLIST_ID, 
            "pageToken" : pageToken
        }).then(function(response) {

            //Fixed code
            const hash = response.result;
            items = hash.items,
            nextPageToken = hash.nextPageToken;

            // The items[] is an array of a playlist items.
            // nextPageToken - if empty - there are no items left to fetch
            playlistItems.push(items);

            // It's up to you, how to handle the item from playlist. 
            // Add 'onclick' events to navigate to another video, or use another thumbnail image quality 
            var index = 0;
            items.forEach(function(item) {
                const thumbnailItem = createPlaylistItem(item, index);
                playlist.appendChild(thumbnailItem);
                index++;
            });
            maxVideoVisible = index - 3;

            // Recursively get another portion of items, if there any left
            if (nextPageToken) {
                getPlaylistItems(nextPageToken);
            }
        }, function(err) {
            console.error("Execute error", err);
    });
}

【讨论】：