プログラミング フロントエンド

【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

 

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

 

スポンサーリンク

-プログラミング, フロントエンド
-

© 2022 エンジニア×ライフハック Powered by AFFINGER5