未捕获的引用错误：未定义 gapi答案

【问题标题】：Uncaught Reference Error: gapi is not defined未捕获的引用错误：未定义 gapi
【发布时间】：2023-03-20 12:49:01
【问题描述】：

所以我正在尝试使用 JS 访问我的谷歌电子表格，我是一个初学者，可能有点过头了，但我需要帮助所以我有这个脚本

<!DOCTYPE html>
<html>
  <head>
    <title>Google Sheets API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Google Sheets API Quickstart</p>

    <!--Add buttons to initiate auth sequence and sign out-->
    <button id="authorize_button" style="display: none;">Authorize</button>
    <button id="signout_button" style="display: none;">Sign Out</button>

    <pre id="content" style="white-space: pre-wrap;"></pre>

    <script type="text/javascript">
      // Client ID and API key from the Developer Console
      var CLIENT_ID = 'CLIENT_ID';
      var API_KEY = 'API_KEY';

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

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

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

      /**
       *  On load, called to load the auth2 library and API client library.
       */
      function handleClientLoad() {
        gapi.load('client:auth2', initClient);
      }

      /**
       *  Initializes the API client library and sets up sign-in state
       *  listeners.
       */
      function initClient() {
        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);

          // 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));
        });
      }

      /**
       *  Called when the signed in status changes, to update the UI
       *  appropriately. After a sign-in, the API is called.
       */
      function updateSigninStatus(isSignedIn) {
        if (isSignedIn) {
          authorizeButton.style.display = 'none';
          signoutButton.style.display = 'block';
          listMajors();
        } else {
          authorizeButton.style.display = 'block';
          signoutButton.style.display = 'none';
        }
      }

      /**
       *  Sign in the user upon button click.
       */
      function handleAuthClick(event) {
        gapi.auth2.getAuthInstance().signIn();
      }

      /**
       *  Sign out the user upon button click.
       */
      function handleSignoutClick(event) {
        gapi.auth2.getAuthInstance().signOut();
      }

      /**
       * Append a pre element to the body containing the given message
       * as its text node. Used to display the results of the API call.
       *
       * @param {string} message Text to be placed in pre element.
       */
      function appendPre(message) {
        var pre = document.getElementById('content');
        var textContent = document.createTextNode(message + '\n');
        pre.appendChild(textContent);
      }

      /**
       * Print the names and majors of students in a sample spreadsheet:
       * https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit
       */
      function listMajors() {
        gapi.client.sheets.spreadsheets.values.get({
          spreadsheetId: 'ID',
          range: 'Class Data!A1:A1',
        }).then(function(response) {
          var range = response.result;
          console.log(range);
          if (range.values.length > 0) {
            appendPre('Name, Major:');
            for (i = 0; i < range.values.length; i++) {
              var row = range.values[i];
              // Print columns A and E, which correspond to indices 0 and 4.
              appendPre(row[0] + ', ' + row[4]);
            }
          } else {
            appendPre('No data found.');
          }
        }, function(response) {
          appendPre('Error: ' + response.result.error.message);
        });
      }
listMajors()
    </script>

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

基本上我在这里要做的是访问我的电子表格并将第一行的第一列打印为 (A1 到 A1) 的范围，我的函数 listMajors() 应该这样做，但我我被这个错误击中了

"<a class='gotoLine' href='#144:9'>144:9</a> Uncaught ReferenceError: gapi is not defined"

【问题讨论】：

标签： javascript google-api google-sheets-api require uncaught-reference-error

【解决方案1】：

在实际加载带有src="https://apis.google.com/js/api.js" 的脚本标记之前，您正在调用listMajors。原因是 gapi 正在异步设置。

在这种情况下，脚本标签末尾的listMajors() 甚至在gapi 加载之前就被执行了。您已经在 updateSigninStatus 中调用它，所以我猜如果您删除该行，它将被正确调用。

请注意，我没有查看该函数中的代码（如果这不起作用并且您不知道原因，您可能应该提出另一个问题）。

【讨论】：

【解决方案2】：

gapi 需要加载并且您需要经过身份验证，然后您的代码才能工作。因此，您可以调用listMajors() 的代码中最早的位置将是handleAuthClick()：

function handleAuthClick(event) {
    gapi.auth2.getAuthInstance().signIn().then(function() {
        listMajors();
    }, function() {
        appendPre('Error while authenticating');
    });
}

不要忘记从您的代码中删除两个（！）对listMajors() 的现有调用。

【讨论】：