【Javascript】静的ページでAPI（GAS含む）からデータを取得したい

こんにちは！

今回は「Javascriptで静的ページでAPI（GAS含む）からデータを取得する方法」についてお伝えしたいと思います。

たまに静的ページで外部APIからデータを取得したいという要件がありませんか？
意外と簡単な方法でできたので、共有したいと思います。

JSのコア機能であるfetch()を使って、外部API（GAS含む）からデータを取得する

fetch() を使ったAPIの処理です。
具体例を用いて説明したほうが分かりやすいと思うので、以下で説明します。

const getApi = async () => {
  const baseUrl="https://script.google.com/macros/s/xxxxxxxxxxxxxxxxxxx/exec";
  const res = await fetch(baseUrl, {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: ``,
  });
  if (!res.ok) return; // エラー場合、後続処理を実行しない
  const resultObj = await res.json();
  console.log(resultObj); // {id: 1, name: '山田 太郎'}  
};

これで、外部のAPIやGASからデータを取得できると思います。
（ちなみにGASと別で記述したのはSEO対策です。。すみません笑）

参考URL

MDN 公式https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

以上、お疲れさまでした〜🍵