glitchからGASにpost通信する

初書：2020/12/27

前書き

GlitchからGoogle App Script(GAS)にPOST通信をしたかったので、その時のメモ。
ちなみに、今回はGlitchを使用しているのでGlitchと書いているが、内部はnode.jsなので、実質node.jsとGASのpost通信と言っても過言ではない(ハズ)

glitch側

内部がnode.jsのため、普通のXMLHttpRequestやajaxは使用できない¹

そのため、今回はaxiosというのを使用してみる

ちなみにgoogle検索をかけると、requestというのもあるが、どうやら既に非推奨らしい。

インストール

glitchではpackage.jsonに書き足すだけでいいので、単純にpackage.jsonの"dependencies"の欄に"axios": "^0.21.0"を書く。

post通信

では実際に通信していく。今回はjsonを使用してデータのやり取りを行うことにする。

const axiosBase = require("axios"); // どこかに書いておく。
const url = "/macros/s/xxxxx/exec"; // gasのドメイン以降のurl
const data = {"key" : "value"}; // 送信するデータ


const axios = axiosBase.create({
    baseURL: "https://script.google.com", // gas以外の場合はそれぞれ書き換え
    headers: {
        "Content-Type": "application/json",
        "X-Requested-With": "XMLHttpRequest",
    },
    responseType: "json",
});
axios.post(url, data)
    .then(async function (response) {
        const responsedata = response.data; // 受け取ったデータ一覧(object)
    })
    .catch(function (error) {
        console.log("ERROR!! occurred in Backend.");
        console.log(error);
    });

簡単な説明

urlのところはgasから取得できるurlを入れる。
dataは送信するpostデータを入れる。ちなみにconst設定しているが、後に追加するならletとかの方がいいかもしれない

axios.post(url, data)で送信し、thenで受け取る。エラーがあればcatchへ行く。
受け取ったデータはresponseに入るので、ここで自分の好きなようにデータを扱う。

GAS側

GAS側はdoPostで受け取るだけなのだが、通常のe.parameterでは取得できないため、e.postData.contentsを使用する。

function doPost(e) {
  let parameter = {}; // post値を受け取った時
  try{
    parameter = JSON.parse(e.postData.contents);
  }catch(e){
    // エラー処理
  }
  // 通常処理
  const obj = {};
  return ContentService.createTextOutput(JSON.stringify(obj));
}

parameterに受け取ったpost値が入っているので、これを使用して処理する。
そして最後にobjをjsonにして返す。

終わりに

一度書ければあとは使いまわせる簡単なものなので、とりあえずこれを使おうかなと思う。
ちなみにglitch及びGASは両方触りたてなので、もしおかしいところがあれば突っ込んでください。

参考サイト

[axios] axios の導入と簡単な使い方 - Qiita

1. 厳密には専用のnpmをインストールしたら出来そうではあるが、試してない ↩