如何为gapi添加onload事件？

Question

我正在使用Google API（gapi）进行用户登录。

以下是我的代码。它异步加载Google SDK。一旦加载完成，我需要调用API函数gapi.auth.authorize

(function(d: any, s: string, id: string) {
    var js: HTMLScriptElement, gjs: Element = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://apis.google.com/js/client.js";
    gjs.parentNode.insertBefore(js, gjs);

    if (js.readyState){  //IE
        js.onreadystatechange = function(){
            if (js.readyState == "loaded" ||
                js.readyState == "complete"){
                js.onreadystatechange = null;
                gapi.auth.authorize();   //<-- details omitted 
            }
        };
    } else {  //Others
        js.onload = function(){
            gapi.auth.authorize();   //<-- details omitted 
        };
    }
}(document, 'script', 'google-jssdk'));

现在的问题是 - 我遇到了错误

TypeError：gapi.auth未定义

应该是已经定义好了，我查看了控制台并输入了gapi.auth，然后我得到了一个对象。

因此，我相信js.onload事件会过早地触发，即在gapi.auth还没有准备好的情况下。

如何解决？或者更具体地说，如何为gapi添加onload事件？

- Vinayak Garg

---

我有同样的问题。我在Mac OS上使用Chrome。我正在同步加载，当我在控制台中键入gapi.auth时，它仍然是“未定义”的，而当我键入gapi时，我得到一个带有许多属性（如client，plus等）但没有auth的对象。这是否与从开发人员控制台启用的API有关？我只启用了Google+ API。 - Nick Sotiros

Answer 1

这是在什么浏览器中看到的？此外，您需要在脚本的src属性末尾包含一个?onload=myFunction参数，然后实现window ['myFunction'] = function() { ... }来检测库的准备就绪。加载通常会注入另一个脚本节点，您还需要等待该节点。请保留HTML标记。

- Ben Sittler

---

一开始让我感到困惑，但后来我意识到你是在谈论脚本标签，就像这样：<script src="https://apis.google.com/js/platform.js?onload=appStart" async defer></script> 然后在我实现了我的回调函数 appStart 后，它完全起作用了。 - ThisClark

Answer 2

window.gapi_onload = function() { gapi.auth.authorize(); }

窗口.gapi_onload = function() { gapi.auth.authorize(); }

- Alexandr Yakubenko

Answer 3

您还可以尝试使用 gapi-script 包，该包可即时提供 gapi，因此您无需等待任何脚本加载，只需导入并使用即可：

import { gapi } from 'gapi-script';

而且该软件包还具有一个初始化gapi auth2的功能：

import { loadAuth2 } from 'gapi-script';

let auth2 = await loadAuth2(clientId, scopes);

- Lucas Andrade