google.script.run.withSuccessHandler() 返回未定义

Question

我使用下面提供的代码在单独的 GS 文件中创建了一个数组。我尝试在我的 HTML 文件中调用它。我的目标是将数组的内容与参数email 进行比较。但是google.script.run.withSuccessHandler()返回的值是undefined

//in GS
function mailGetter()
{
  //open sheet
  var sheet = SpreadsheetApp.openByUrl("https://sheet.url").getSheetByName("Email Sheet").activate();
  //get size of given row range
  var row_data_email = sheet.getRange("C2:C").getValues();
  var emailArray = row_data_email.join().split(',').filter(Boolean);
  Logger.log(emailArray);
  
  return emailArray;
}

//in HTML
function checkEmail(email) 
    {
      var reg1 = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;
      var arraySize = google.script.run.withSuccessHandler(misc).sizeGetter(); 
      console.log(arraySize);
      var emailArray = new Array(arraySize);
      emailArray = google.script.run.withSuccessHandler(misc).mailGetter();
      console.log(emailArray);
      
      if (reg1.test(email) == false) 
      {
        emails.style.border = "1px solid red";
        document.getElementById('submitBtn').disabled = true;
      } 
      else if (reg1.test(email) == true) 
      {
        emails.style.border = "1px solid green";
        document.getElementById('submitBtn').disabled = false;
      }
      
      for (var row = 0; row < arraySize; row++)
      {
        if (emailArray[row][0] == email)
        {
          emails.style.border = "1px solid green";
          document.getElementById('submitBtn').disabled = false;
          break;
        }
        else if (emailArray[row][0] != email)
        {
          emails.style.border = "1px solid red";
          document.getElementById('submitBtn').disabled = true;
        }
      }
    }

    function misc()
    {
      console.log("Pass");
    }

Answer 1

问题：

• 使用异步函数的 (google.script.run) 返回值，该值将始终为 undefined。

解决办法：

• 使用另一个答案中提到的successHandler，或者我们可以将promises与async/await一起使用。

片段：

/*Create a promise around old callback api*/
const p = func => 
  new Promise(resolve=>
    google.script.run.withSuccessHandler(resolve)[func]()
  );

async function checkEmail(email) //modified
    {
      var arraySize = await p('sizeGetter');//Wait to resolve
      console.log(arraySize);
      //var emailArray = new Array(arraySize);
      var emailArray = await p('mailGetter');//Wait to resolve
      console.log(emailArray);
      //....
    }

注意：

• 最好减少对服务器的调用次数。如果您可以将两个Getters 合并到一个服务器函数中，那就更好了。
• 上面是一个sn-p，展示了如何使用async/await。但是，如果您如上所示等待来自服务器的每个响应，您的前端/UI 将会很慢。仅在绝对必要时等待。对服务器的调用应该是非阻塞/异步的。

参考资料：

• Promises
• async
• await

Answer 2

问题出在以下几行：

emailArray = google.script.run.withSuccessHandler(misc).mailGetter();
console.log(emailArray);

您正在尝试执行mailGetter() 并期望它返回您存储在emailArray 但this method is asynchronous and does not return directly 中的值

相反，您将在回调中获得您定义为SuccessHandler的值

建议的解决方案：

1. 从模板调用 Apps 脚本函数：https://developers.google.com/apps-script/guides/html/templates#apps_script_code_in_scriptlets
2. 直接调用 Apps Script API：https://developers.google.com/apps-script/guides/html/templates#calling_apps_script_apis_directly
3. 将变量推送到模板：https://developers.google.com/apps-script/guides/html/templates#pushing_variables_to_templates

参考：https://developers.google.com/apps-script/guides/html/reference/run#myFunction(...)