如何结合JS与Google Apps Script使用sessionStorage避免重复请求？

我希望当sessionStorage中存在对应orderPo的数据时，避免调用服务器端函数getSuppliersForPoFromSS(orderPo, origin)，但不确定当前代码结构是否正确。以下是我编写的代码：

**/
 * 从电子表格获取指定供应商并构建带选项的下拉输入框。
 * @param {Object} selecObject
 * @param {String} origin 指定数据获取来源
 */
function loadSuppliersForPoFromSS(selectObject, origin) {
  orderPo = selectObject.value;
  document.getElementById('selectSupplier').innerHTML = '';
   
  // 尝试获取二维数组，例如：[["Item1", "Item2"]]
  let ar = JSON.parse(sessionStorage.getItem(orderPo));
 
   
  if(!ar){   
  google.script.run.withSuccessHandler(function(ar) {
    let select = document.getElementById('selectSupplier');
    let options = select.getElementsByTagName('option');
    for (let i = options.length; i--;) {
      select.removeChild(options[i]);
    }
    let option = document.createElement("option");
    option.value = "";
    option.text = "";
    select.appendChild(option);
    ar.forEach(function(item, index) {
      let option = document.createElement("option");
      option.value = item.toLowerCase();
      option.text = item;
      select.appendChild(option)
    });
  }).getSuppliersForPoFromSS(orderPo, origin);
 } else {
  // 是否需要重写从sessionStorage构建选项的代码？
}

请问是否需要在else分支中重新编写从sessionStorage获取数据构建下拉选项的逻辑？

需要在else分支中编写构建下拉选项的逻辑，否则当sessionStorage存在缓存数据时，下拉框会保持为空状态（你开头已经清空了selectSupplier的innerHTML，但没有后续填充逻辑）。

为了避免代码冗余，建议把构建下拉选项的逻辑抽成独立函数，这样不管是从服务器获取数据还是从sessionStorage读取缓存，都可以复用同一套逻辑，同时还能在获取到服务器数据后把它存入sessionStorage，方便后续复用。

优化后的代码示例：

/**
 * 从电子表格获取指定供应商并构建带选项的下拉输入框。
 * @param {Object} selectObject
 * @param {String} origin 指定数据获取来源
 */
function loadSuppliersForPoFromSS(selectObject, origin) {
  const orderPo = selectObject.value;
  const select = document.getElementById('selectSupplier');
  // 先清空下拉框
  select.innerHTML = '';

  // 尝试从sessionStorage获取缓存数据
  let ar = JSON.parse(sessionStorage.getItem(orderPo));

  if (!ar) {
    // 缓存不存在时调用服务器接口
    google.script.run.withSuccessHandler(function(serverData) {
      // 将服务器返回的数据存入sessionStorage做缓存
      sessionStorage.setItem(orderPo, JSON.stringify(serverData));
      // 复用构建下拉框的逻辑
      buildSupplierSelect(select, serverData);
    }).getSuppliersForPoFromSS(orderPo, origin);
  } else {
    // 缓存存在时直接用缓存数据构建下拉框
    buildSupplierSelect(select, ar);
  }
}

/**
 * 复用的下拉框构建函数
 * @param {HTMLElement} selectElement 目标下拉框元素
 * @param {Array} data 供应商数据数组
 */
function buildSupplierSelect(selectElement, data) {
  // 添加空选项
  const emptyOption = document.createElement("option");
  emptyOption.value = "";
  emptyOption.text = "";
  selectElement.appendChild(emptyOption);

  // 遍历数据添加选项
  data.forEach(item => {
    const option = document.createElement("option");
    option.value = item.toLowerCase();
    option.text = item;
    selectElement.appendChild(option);
  });
}

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