无法读取未定义的gapi.client的属性“init”

Question

我正在尝试将 Google Calendar API 与 Js 集成到应用程序中。我尝试遵循Google Quickstart。如果我将示例代码粘贴到 HTML 文档中，更改 clientID 和 API 密钥，则当我在 Chrome 中打开该文件时，会收到附加错误。

还有，随着console.log(gapi.client)我回来null。

第一个代码块是调用gapi函数的地方（calendar_model.js）。

第二个块是我将 api 脚本链接到文档的地方（我需要通过 js 在名为 dependency.js 的文件中执行此操作）。

第三个块是我的index.js，我从这里调用dependency.js 中的函数。

console.log("first");

// Client ID and API key from the Developer Console
var CLIENT_ID = 'xxxxxxxxxxxxxxxxx.apps.googleusercontent.com';
var API_KEY = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx';

// Array of API discovery doc URLs for APIs used by the quickstart
var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];

// Authorization scopes required by the API; multiple scopes can be
// included, separated by spaces.
var SCOPES = "https://www.googleapis.com/auth/calendar.readonly";

var authorizeButton;
var signoutButton;
/**
 *  On load, called to load the auth2 library and API client library.
 */
function handleClientLoad() {
  console.log("gapi type: " + typeof gapi + '\n');
  console.log("gapi client type: " + typeof gapi.client + '\n');
  gapi.load('client:auth2', initClient);
}

/**
 *  Initializes the API client library and sets up sign-in state
 *  listeners.
 */
function initClient()
{
  console.log("initClient callback start");
  gapi.client.init({
    apiKey: API_KEY,
    clientId: CLIENT_ID,
    discoveryDocs: DISCOVERY_DOCS,
    scope: SCOPES
  }).then(function () {
    // Listen for sign-in state changes.
    gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
    console.log(gapi);
    // Handle the initial sign-in state.
    updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
    authorizeButton.onclick = handleAuthClick;
    signoutButton.onclick = handleSignoutClick;
  }, function(error) {
    appendPre(JSON.stringify(error, null, 2));
  });
}

window.testMicroAppDependency = {
    calendarInit: function(){
        var calendar_root = document.getElementById("gcalendar-root");
        //create authorize button
        var x = document.createElement("button");
        x.setAttribute("id", "authorize_button");
        //x.style = "display: none";
        calendar_root.appendChild(x);
        //create signout button
        x = document.createElement("button");
        x.setAttribute("id", "signout_button");
        //x.style = "display: none";
        calendar_root.appendChild(x);

        authorizeButton = document.getElementById('authorize_button');
        signoutButton = document.getElementById('signout_button');
        
        x = document.createElement("script");
        x.src = "https://apis.google.com/js/api.js";
        x.async = true;
        x.defer = true;
        x.setAttribute("onload", "handleClientLoad()");
        x.setAttribute("onreadystatechange", "if (this.readyState === 'complete') this.onload()");
        calendar_root.appendChild(x);
    }
}

registry.add("microapp", "googlecalendar", {
        init: function (parentNode, options) {

            this._waitForDependency(function (error, dependency) {
                if (error) {
                    console.error("Unable to start Google Calendar MicroApp: " + error);
                } else {                    
                    var content = document.createElement("div");
                    content.setAttribute("id", "gcalendar-root");
                    parentNode.appendChild(content);
                    dependency.calendarInit();
                }
            });
        },

        _waitForDependency: function(callback) {
            var timeout = 5000;
            var startTime = new Date().getTime();
            var interval = setInterval(function() {
                if (window.hasOwnProperty("testMicroAppDependency")) {
                    clearInterval(interval);
                    callback(null, window.testMicroAppDependency);
                }
                if (new Date().getTime() - startTime > timeout) {
                    clearInterval(interval);
                    callback("Loading of HelloWorld MicroApp scripts timed out.", null);
                }
                console.log("... (waiting for testMicroAppDependency)");
            }, 100);
        }
    });

这是我记录gapi 和gapi.client 类型的控制台。gapi是一个对象，因此库已加载，但gapi.client未定义。

我是网络开发方面的新手，也许这是一个愚蠢的问题，或者我不理解有关 Google API 的内容，但我无法解决它。

如有任何帮助，我们将不胜感激:)

Answer 1

您遇到的主要问题是您initClient在这里将函数作为显式函数调用：

gapi.load('client:auth2', initClient())

您必须将其作为隐式函数传递，因为gapi.load将使用它作为回调（我建议您检查有关它们的更多信息）。因此，必须这样传递：

gapi.load('client:auth2', initClient)

请注意initClient()和中的括号之间微妙但非常重要的区别initClient。

另外，这些变量是悬而未决的，但没有为它们分配我所看到的值：

var authorizeButton;
var signoutButton;

应该为它们分配按钮元素，以便最终在代码中处理它们：

var authorizeButton = document.getElementById('authorize_button');
var signoutButton = document.getElementById('signout_button');