~楓花雪岳~: [GAS] google.script.run

星期四, 12月 18, 2025

[GAS] google.script.run

google.script.run 是非同步用戶端 JavaScript API，可呼叫伺服器端 Apps Script 內函式，當呼叫 Apps Script 內函式時並不會直接傳回值，而是透過 withSuccessHandler、withFailureHandler 搭配對應 callback function 來處理回傳值

範例 Code 說明

使用 google.script.run 非同步呼叫 .gs Code 內的 processData()，processData() 執行

成功：透過 withSuccessHandler 執行自訂函數 onSuccessHandler
失敗：透過 withFailureHandler 執行自訂函數 onFailureHandler

google.script.run
	.withSuccessHandler(onSuccessHandler)
	.withFailureHandler(onFailureHandler)
	.processData(emailValue);

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('css') ?>
  </head>
  <body>

    <div class="app-container">

      <label class="field-label">電子郵件：</label>

      <input type="email" class="input-email" placeholder="example@mail.com">
      
      <button class="btn-submit" onclick="runUpload()">提交測試</button>
      
      <div class="result-message">等待操作</div>
    </div>

    <script>
      function onSuccessHandler(response) {
        const display = document.querySelector('.result-message');
        display.innerText = "【SuccessHandler 觸發】\n" + response;
        display.className = "result-message text-success";
      }

      // withFailureHandler 回傳值為 Error 物件
      function onFailureHandler(error) {
        const display = document.querySelector('.result-message');
        display.innerText = "【FailureHandler 觸發】\n" + error.message;
        display.className = "result-message text-failure";
      }

      function runUpload() {
        let emailValue = document.querySelector('.input-email').value;
        let display = document.querySelector('.result-message');
        
        display.innerText = "呼叫 .gs Code 中，請稍後";

        // 使用 google.script.run 呼叫 .gs Code 內的 processData()
        google.script.run
          .withSuccessHandler(onSuccessHandler)
          .withFailureHandler(onFailureHandler)
          .processData(emailValue);
      }
    </script>
  </body>
</html>

Code.gs

奇數分鐘回傳成功，偶數分數回傳失敗

function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setTitle('[GAS] google.script.run');
}

function include(fileName)
{
  return HtmlService.createHtmlOutputFromFile(fileName).getContent();
}

function processData(email) {

  let now = new Date();
  let minutes = now.getMinutes();

  // 奇數分鐘：正常回傳
  if (minutes % 2 !== 0) {
    return "成功！Email 為：" + email;
  }

  // 偶數分鐘：拋出錯誤
  throw new Error("失敗！Email 為：" + email);
}

css

<style>
  .app-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 30px;
    line-height: 1.6;
  }

  .field-label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }

  .input-email {
    width: 250px;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .btn-submit {
    display: block;
    padding: 8px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .btn-submit:hover {
    background-color: #0056b3;
  }

  .result-message {
    margin-top: 20px;
    padding: 15px;
    border-left: 5px solid #eee;
    background-color: #f9f9f9;
    white-space: pre-wrap;
  }

  .text-success {
    border-left-color: #28a745;
    color: #155724;
  }

  .text-failure {
    border-left-color: #dc3545;
    color: #721c24;
  }
</style>

執行結果

~楓花雪岳~

星期四, 12月 18, 2025

[GAS] google.script.run

沒有留言:

張貼留言