javascript - YouTube数据Api v3-未捕获的TypeError:无法读取未定义的属性 'setApiKey'

Question

我想使用YouTube数据API执行我的YouTube数据。

<!-- Google Sign in API JS -->
<script src="https://apis.google.com/js/api.js"></script>
<script>
    function onSuccess(googleUser) {
        console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
        console.log('Logged in as: ' + googleUser.getBasicProfile().getEmail());
    }

    function onFailure(error) {
        console.log(error);
    }

    function renderButton() {
        gapi.signin2.render('my-signin2', {
            'scope': 'profile email',
            'width': 300,
            'height': 40,
            'longtitle': true,
            'theme': 'light',
            'onsuccess': onSuccess,
            'onfailure': onFailure
        });
    }
</script>
<script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>

<!-- Custom JS -->
<script src="./js/login.js"></script>
<script src="./js/logout.js"></script>
<script src="./js/scripts.js"></script>

Login.js

function authenticate() {
return gapi.auth2.getAuthInstance()
    .signIn({
        scope: 'https://www.googleapis.com/auth/youtube.readonly  https://www.googleapis.com/auth/youtube.force-ssl'
    })
    .then(function loadClient() {

            console.log('Sign-in successful');

            // If Log in successfull remove
            const sideLead = document.getElementById('side-lead')
            const rowContent1 = document.getElementById('rowContent1')
            sideLead.classList.add('d-none')
            rowContent1.classList.add('d-none')

            // then remove
            const sideNavs = document.getElementById('side-navs')
            const rowContent2 = document.getElementById('rowContent2')
            sideNavs.classList.remove('d-none')
            rowContent2.classList.remove('d-none')

            // Set API Key
            gapi.client.setApiKey("MY_API_KEY");
            return gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
                .then(function () {
                        console.log("GAPI client loaded for API");
                    },
                    function (err) {
                        console.error("Error loading GAPI client for API", err);
                    });

        },
        function (err) {
            console.error('Error signing in', err);
        });
}

该代码不起作用。 Chrome控制台显示:

Uncaught TypeError: Cannot read property 'setApiKey' of undefined

Answer 1

尝试在html末尾添加此脚本

<script type="text/javascript" src="https://apis.google.com/js/client.js?onload=init"></script>