在 Google Apps 脚本中异步保存复选框答案

【问题标题】：Saving checkboxes asynchronously in Google Apps Script在 Google Apps 脚本中异步保存复选框
【发布时间】：2019-03-15 01:14:03
【问题描述】：

我是异步调用的新手，我认为这就是问题所在。但是，我不太确定如何修复它，因为 Google Apps 脚本不支持承诺，而且我也不知道如何使用它们。我听说如果在 GAS 中使用 HTML 服务，那么承诺是可能的，这就是我正在使用的。但是，我不知道如何实现这一点。这是我到目前为止所拥有的。 主要问题是我需要将数据显示在下面服务器端 (code.gs) 的第二个 Logger.log 中。数据到达第一个 logger.log (code.gs) 中的函数，但在第二个 logger.log (code.gs) 中显示用户缓存时，该对象为空（非空）。可以使用任何键/数据并且可以复制问题，因此它与异步调用有关，但是如何在 GUI_JS 代码中修复它？

服务器端（code.gs）：

// global variable to save into the cache
var userCache = CacheService.getUserCache();

// SAVE OPERATION - saves the checkboxes into the user cache
function processSavedValues(checkboxesObj){
  Logger.log(checkboxesObj); // this line shows in Logger
  userCache.putAll(checkboxesObj, 20);
  var getCache = userCache.getAll(['key1','key2']);
  Logger.log(getCache); // this line doesn't show in Logger
}

// Loads the HTML Service of Apps Script
function doGet(request) {
  return HtmlService.createTemplateFromFile('index').evaluate();
}
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

客户端（index.html）：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>

  <form>
    <fieldset class="columnList">
      <div>
        <input type="checkbox" id="key1" name="fieldset[]" value="value1">
        <label class="checkmark" for="key1">test1</label>
      </div>
      <div>
        <input type="checkbox" id="key2" name="fieldset[]" value="value2">
        <label class="checkmark" for="key2">test2</label>
      </div> 
    </fieldset>
  </form>

  <button onclick="saveAllCheckboxValues()">test</button>

  <?!= include('GUI_JS'); ?> 
  </body>
</html>

客户端使用 HTML 服务 (GUI_JS.html)：

<script>

// Saves all checkbox values into the cache
function saveAllCheckboxValues(){

  // Select all checkboxes in the document
  var allCheckboxes = document.querySelectorAll("input[type=checkbox]");

  // Create a Key/Value pairs with the IDs and values of each checkbox
  var checkboxesObj = {};
  for (var i = 0; i < allCheckboxes.length; i++) {
     checkboxesObj[allCheckboxes[i].id] = allCheckboxes[i].checked;
  }

  // sends the checkbox values server-side into the cache
  google.script.run.withSuccessHandler(checkboxSaved).processSavedValues(checkboxesObj);

  // displays successfully saved
  function checkboxSaved(){
    alert("Great Success!");
  }

}

</script>

Logger.log 的结果：

[19-03-14 18:28:38:913 PDT] {key1=true, key2=true}
[19-03-14 18:28:38:959 PDT] {}

【问题讨论】：

你能粘贴Logger.log(checkboxesObj); // this line shows in Logger的结果吗
当然，你去...
这些值与您在其他问题中使用的值相同吗？正如我在我的 cmets & answer 中提到的，以及 Tanaike 在这里提到的，要放置在缓存中的值必须是字符串。

标签： javascript asynchronous google-apps-script web-applications

【解决方案1】：

我认为您的问题的原因是对象中用于放入 CacheService 的布尔值。在 CacheService 中，字符串值用于放置。那么这个改装怎么样呢？请认为这只是几个答案之一。在我的修改中，修改了processSavedValues()的功能。

修改脚本：

function processSavedValues(checkboxesObj){
  Logger.log(checkboxesObj);
  userCache.put("sampleKey", JSON.stringify(checkboxesObj), 20); // Modified
  var getCache = userCache.get("sampleKey"); // Modified
  getCache = JSON.parse(getCache); // Added
  Logger.log(getCache);
}

参考资料：

如果这不起作用并且这不是您想要的结果，我深表歉意。

【讨论】：

太棒了，谢谢！只要它有效并且确实有效。但是，我仍在尝试消化这里发生的事情。布尔值让我失望，因为它在不作为对象存储时有效。所以你以某种方式模仿它？天啊...我从来没有想过这一点。非常巧妙。谢谢！
@Alex 感谢您的回复。我很高兴你的问题得到了解决。在put()的方法中，布尔值和数字值自动转换为字符串值并放入，而对象不转换。但是在putAll()的方法下，似乎对象中的每个值都没有转换。我认为这样，问题就出现了。所以我提出了类似答案的解决方法。