如何为 gapi 添加 onload 事件？答案

【问题标题】：How to add onload event for gapi?如何为 gapi 添加 onload 事件？
【发布时间】：2019-07-18 05:00:40
【问题描述】：

我正在使用 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 事件？

【问题讨论】：

我也有同样的问题。我在mac os上使用chrome。我正在同步加载，当我在控制台中输入gapi.auth 时，它仍然是undefined，当我输入gapi 时，我得到一个具有许多属性的对象，例如client、plus 等，但没有@987654331 @。这是否与从开发者控制台启用的 API 有关？我只启用了 Google+ API。

标签： javascript google-api-js-client

【解决方案1】：

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

【讨论】：

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

【解决方案2】：

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

【讨论】：

【解决方案3】：

你也可以试试gapi-script这个包，这个包即时提供gapi，所以你不用等待任何脚本加载，直接导入使用即可：

import { gapi } from 'gapi-script';

并且该包还有一个初始化gapi auth2的功能：

import { loadAuth2 } from 'gapi-script';

let auth2 = await loadAuth2(clientId, scopes);

【讨论】：