Apps Script插件：关闭模态框后确保异步方法执行完成

我用React开发Google Apps Script插件，点击Cancel按钮时要执行handleCancel方法——先调用someAsyncMethod，再用google.script.host.close()关闭模态框。但someAsyncMethod执行耗时约5秒，我想点击Cancel后立刻关闭模态框，可移除await关键字后，这个异步方法会被挂起或无法完成执行，怀疑是google.script.host.close()导致上下文销毁的问题。有没有办法让someAsyncMethod在后台继续执行，同时马上关闭模态框？

代码示例 #

export const SampleCmp = () => {
    const handleCancel = async () => {
        await someAsyncMethod();
        google.script.host.close();
    };

    return (
      <button
        onClick={handleCancel}
      >
        Cancel
      </button>
    );
};

const someAsyncMethod = async() : Promise<SomeObject> => {
    // 耗时约5秒的异步逻辑
};

解决方案 #

核心问题是google.script.host.close()会直接销毁前端上下文，未完成的异步任务会被终止。以下是两种可靠的解决思路：

方法一：给HTTP请求添加keepalive参数（适用于调用接口的场景）

如果someAsyncMethod是通过fetch调用Apps Script的doPost/doGet接口，给请求加上keepalive: true参数，就能让请求在页面关闭后仍继续发送到服务器端执行：

const someAsyncMethod = async() : Promise<SomeObject> => {
  await fetch('https://script.google.com/macros/s/你的脚本ID/exec', {
    method: 'POST',
    body: JSON.stringify(你的业务参数),
    keepalive: true // 关键参数，确保请求不被中断
  });
};

// 修改handleCancel，无需await，直接触发任务后关闭模态框
const handleCancel = () => {
  someAsyncMethod().catch(err => console.error(err)); // 捕获错误避免控制台报错
  google.script.host.close();
};

方法二：用Apps Script触发器实现后台执行（适用于服务器端逻辑）

如果someAsyncMethod的核心逻辑是在Apps Script的.gs服务器端代码里，可以创建时间驱动触发器，让任务在前端关闭模态框后再执行：

前端React代码：

const handleCancel = () => {
  // 调用服务器端函数创建延迟触发器
  google.script.run.withFailureHandler(err => console.error(err))
    .createBackgroundTask();
  google.script.host.close();
};

服务器端.gs代码：

// 创建1秒后执行的触发器，确保前端已关闭模态框
function createBackgroundTask() {
  const trigger = ScriptApp.newTrigger('runAsyncLogic')
    .timeBased()
    .after(1000)
    .create();
  // 可选：执行完任务后删除触发器，避免重复触发
  PropertiesService.getScriptProperties().setProperty('triggerId', trigger.getUniqueId());
}

// 原来someAsyncMethod里的服务器端逻辑
function runAsyncLogic() {
  // 执行耗时5秒的任务
  // ...
  
  // 删除触发器
  const triggerId = PropertiesService.getScriptProperties().getProperty('triggerId');
  const triggers = ScriptApp.getProjectTriggers();
  for (let t of triggers) {
    if (t.getUniqueId() === triggerId) {
      ScriptApp.deleteTrigger(t);
      break;
    }
  }
}

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