google-drive-api - gapi.client 的问题

Question

我是使用 JavaScript 开发 Web 应用程序以可视化来自 Google 表格的数据的团队的一员。

我们完全按照快速入门指南中所示的初始化方向，通过有关用户注销的代码： https ://developers.google.com/drive/api/v3/quickstart/js

我们有一个唯一的 API 密钥和一个客户端 ID，并使用了以下发现文档和范围：

var DISCOVERY_DOCS = [
    "https://sheets.googleapis.com/$discovery/rest?version=v4",
    "https://www.googleapis.com/discovery/v1/apis/drive/v3/rest",
  ];

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

我们现在正在尝试实现一个动态侧边栏，用于显示 Google Drive 文件夹中存在的文件。最终用户稍后将使用这些来过滤数据集。

这是该函数的代码：

function getFolders() {
    gapi.client.drive.files
      .list({
        pageSize: 100,
        fields: "nextPageToken, files(id, name, parents)",
      })
      .then(function (response) {
        const childrenFolders = [];
        var files = response.result.files;
        if (files.length > 0) {
          const dashboardId = "XXXXXXXXXXXXXXXXXXXXX";
          //used to find the parent folder from the selectSchool
          for (var i = 0; i < files.length; i++) {
            var file = files[i];
            if (file.parents == dashboardId) {
              if (file.name != "File List" && file.name.substr(file.name.length - 4) != "xlsx") {
                childrenFolders.push(file.name);
              }
            }
          }
          console.log(childrenFolders);
          return childrenFolders;
        } else {
          errorMsg("No files found");
        }
      });
  }

这是我们的 index.html 文件的脚本部分：

<script src="js/popups.js"></script>
    <script src="js/reader.js"></script>
    <script src="js/sidebar.js"></script>
    <script src="js/charts.js"></script>
    <script src="js/main.js"></script>

    <script
      src="https://apis.google.com/js/api.js"
      onload="this.onload=function(){};handleClientLoad()"
      onreadystatechange="if (this.readyState === 'complete') this.onload()"
    ></script>

getFolders() 在 reader.js 中定义，包含 google drive api 的身份验证功能（如在快速入门文档中），并在呈现侧边栏的 sidebar.js 中调用。

当用户首次加载网页时，我们的身份验证功能会强制他们登录以继续；这些功能运作良好。但是，在 JS 文件中调用 getFolders() 以生成文件名数组会产生错误，提示“未定义 gapi”。

如果我在浏览器控制台中运行 getFolders()，它将使用以下输出运行：

> getFolders()

< undefined
 > (3) ['file_name_1', 'file_name_2', 'file_name_3']    reader.js:202

怎么会是函数在控制台中运行，而不是在js文件中呢？我认为问题在于打印的“未定义”。当我运行“gapi.client”时，输出为“未定义”，如果我运行

console.log(gapi.client.drive)

我得到“无法读取未定义的属性‘驱动器’”

如果我们提供了客户 ID 信息，为什么客户是未定义的？我对 Google Drive API 很陌生，所以我忘记做这件事可能很愚蠢。

谢谢您的帮助！

标签： google-drive-api