サーバ側(GAS)の処理
function calculate(x, y) {
if (typeof x !== 'number' || typeof x !== 'number') {
throw new Error('数値ではありません');
}
return x + y;
}
クライアント側の処理
async function btnClick() {
try {
const value = await getData(3, 5);
// const value = await getData("a", "b"); //例外を発生させる
console.log(value); // 3 + 5 -> 8
} catch (error) { //Errorオブジェクト
console.log(error.message); //数値以外を設定したとき、「数値ではありません」が出力される
} finally {
// 後処理
// 砂時計のカーソルを元に戻すなど
};
}
// データ取得関数を定義
function getData(x, y) {
return new Promise((resolve, reject) => {
google.script.run
.withSuccessHandler(data => resolve(data))
.withFailureHandler(error => reject(error)) //Errorオブジェクト
// 2023-11-08 追記
// よりシンプルに以下でもいけました
//.withSuccessHandler(resolve)
//.withFailureHandler(reject) //Errorオブジェクト
.calculate(x, y); //ユーザ定義の任意の関数(GAS側の関数にあわせる)
});
}
サンプルプログラム
コード.gs
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate();
}
function calculate(x, y) {
Logger.log(`x:${x} y:${y}`);
if (typeof x !== 'number' || typeof x !== 'number') {
throw new Error('数値ではありません');
}
return x + y;
}
index.html
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="btnClick()">計算</button>
<script>
async function btnClick() {
try {
const value = await getData(3, 5);
// const value = await getData("a", "b"); //例外を発生させる
console.log(value); // 3 + 5 -> 8
} catch (error) { //Errorオブジェクト
console.log(error.message); //数値以外を設定したとき、「数値ではありません」が出力される
} finally {
// 後処理
// 砂時計のカーソルを元に戻すなど
};
}
// データ取得関数を定義
function getData(x, y) {
return new Promise((resolve, reject) => {
google.script.run
.withSuccessHandler(data => resolve(data))
.withFailureHandler(error => reject(error)) //Errorオブジェクト
.calculate(x, y); //ユーザ定義の任意の関数(GAS側の関数にあわせる)
});
}
</script>
</body>
</html>
Proxy を使う方法
2024/3/23 追記
Proxyオブジェクトを使えば、もっと汎用的に記述できます
クライアント側の処理
async function btnClick() {
try {
const value = await googleScriptRun.calculate(3, 5);
// const value = await googleScriptRun.calculate("a", "b"); //例外を発生させる
console.log(value); // 3 + 5 -> 8
} catch (error) { //Errorオブジェクト
console.log(error.message); //数値以外を設定したとき、「数値ではありません」が出力される
} finally {
// 後処理
// 砂時計のカーソルを元に戻すなど
};
}
const googleScriptRun = new Proxy(google.script.run, {
get(target, method) {
return (...args) => new Promise((resolve, reject) => {
target
.withSuccessHandler(resolve)
.withFailureHandler(reject)
[method](...args);
});
}
});
参考記事