Google Apps Script中HTML调用google.script.run.setPort()失效求助

问题根源 #

1. 表单默认提交行为未阻止：点击Submit按钮后，表单会触发默认的HTTP提交逻辑，导致页面刷新，直接中断了google.script.run的异步请求，服务器端函数还没来得及执行就被终止。
2. 异步请求未等待完成就关闭侧边栏：google.script.run是异步执行的，原代码在调用它之后立刻执行google.script.host.close()，会直接终止未完成的请求。

修复方案 #

步骤1：阻止表单默认提交行为 #

在表单提交事件中禁用默认刷新逻辑，避免请求被中断。

步骤2：用异步回调确保函数执行完成 #

借助google.script.run的withSuccessHandler方法，等服务器端函数执行成功后再关闭侧边栏，同时添加错误捕获逻辑方便调试。

修改后的代码 #

HTML文件（API Request Form） #

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
  <form id="token" onsubmit="return checkData(event)">
    <fieldset>
      <legend>Enter Your Token</legend>
      <br>
      <input type="text" name="token" value="" placeholder="Enter your Token here">
      <br>
      <br>
      <input type="submit" value="Submit">
      <input type="reset" value="Cancel">
    </fieldset>
  </form>

  <script>
    function checkData(event) {
      // 阻止表单默认提交刷新行为
      event.preventDefault();
      const form = event.target;
      const tokenValue = form.token.value.trim();
      
      if (tokenValue !== "") {
        // 等待服务器端函数执行完成后再关闭侧边栏
        google.script.run
          .withSuccessHandler(() => {
            google.script.host.close();
          })
          .withFailureHandler(error => {
            alert("提交失败：" + error.message);
            console.error(error);
          })
          .setPort(form);
      } else {
        alert("请输入有效Token");
      }
    }
  </script>
</body>
</html>

GS文件（API_Render.gs） #

var ui = SpreadsheetApp.getUi()

function getCanvasInfoAPI(Token) {
  try{
    var Data = UrlFetchApp.fetch('https://canvas.instructure.com/api/v1/courses?access_token='+Token);
    var Status = Data.getResponseCode();
    Logger.log("Status: %s\n Data: %s",Status,Data)
  }catch(err){
    console.error('getCanvasInfoAPI() yielded an error: ' + err);
  }
}

function setPort(formObject){
  try {
    var ss = SpreadsheetApp.getActive();
    var sheet = ss.getSheetByName("Sheet2"); 
    // 检查Sheet2是否存在，避免静默失败
    if (!sheet) {
      throw new Error("未找到Sheet2，请确认工作表名称正确");
    }
    sheet.appendRow([formObject.token]);
    ui.alert("Token已保存：" + formObject.token);
  } catch (err) {
    console.error('setPort()执行出错：' + err);
    throw err; // 抛出错误让前端捕获
  }
}

function RequestToken(){
  ui.showSidebar(HtmlService.createHtmlOutputFromFile('API Request Form').setTitle("Token Request"))
}

额外说明 #

• 给setPort函数添加了错误捕获和工作表存在性检查，避免因配置问题导致的静默失败。
• 使用trim()处理输入值，过滤用户误输入的空格。
• 新增错误回调，方便快速定位执行过程中的问题。

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