如何将 vue.js 与 gapi 连接起来

Question

我尝试了太多东西，但我无法解决这个问题。我正在尝试将 vue.js 与 gapi 连接，以便之后使用 Google 电子表格。 问题是我认为脚本中的 api.js 没有加载我不知道原因。每次控制台说：“未定义gapi”时，我都试图在gapi.load 中放置一个setTimeout，但什么也没有。 如果有人可以帮助我..

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.min.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="https://apis.google.com/js/platform.js"></script>
<script>
    import * as http from "http";
    import Vue from "vue";

    export default {
        data() {
            return {
                entries: []
            };
        },
        mounted() { 

             // Client ID and API key from the Developer Console
      var CLIENT_ID = 'AIzaSyBcN4pjE5yK9ZXphpfe7yJddrvYTxCUhYU';

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

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

        const gauthOption = {
        discoveryDocs: DISCOVERY_DOCS,
        clientId: CLIENT_ID,
        scope: SCOPES
        };

         gapi.load('client:auth2', gauthOption);

Answer 1

在执行代码之前可能需要等待gapi，您可以在脚本标签中使用onload查询参数，如下所示：

<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback"  async defer></script>
<script>
window.onLoadCallback = function(){
  gapi.load('client:auth2', gauthOption);
}