使用Google Picker API时调用gapi.client.request报未定义错误如何解决

问题排查与解决方案 #

你遇到的报错核心原因是gapi.client对象未完成初始化就被调用，可按以下顺序排查：

• 确认Google API客户端库已正确引入
  页面头部必须引入官方客户端加载脚本，不要使用第三方封装的异步加载脚本避免加载失败：

  <script src="https://apis.google.com/js/api.js"></script>
  

• 确认显式加载了client模块
  Google Picker模块和API请求client模块是相互独立的，仅加载picker模块不会自动初始化gapi.client，需要在加载时显式声明加载client：

  // 同时加载picker和client模块，回调触发后再执行业务逻辑
  gapi.load('client:picker', () => {
    // 在这里执行Picker初始化、授权、文件权限修改等逻辑
  })
  

• 确认代码执行顺序正确
  必须严格遵循执行顺序：加载gapi基础库 → 加载client+picker模块 → 完成OAuth授权拿到token → 唤起Picker选到文件拿到fileID → 最后执行gapi.client.request请求，前序步骤未完成时调用接口都会触发undefined报错。
• 临时兜底兼容处理
  可以在请求前加一层存在性判断，避免偶发的加载时序问题：

  function updateFilePermission() {
    if (!gapi || !gapi.client) {
      setTimeout(updateFilePermission, 100)
      return
    }
    // 替换为你原本的请求逻辑
    var request1 =  gapi.client.request({
      'path': '/drive/v3/files/' + fileID + '/permissions',
      'method': 'POST',
      'headers': {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + oauthToken
      },
      'body': {
        'role': role,
        'type': type
      }
    });
    request1.execute(function (resp) {
      console.log(resp);
    });
  }
  

内容的提问来源于stack exchange，提问作者MJERM