HTMLベタ書きでaxiosを使う

axiosを最低限度で使ってみるために、axios自体をCDNから呼び出し、HTMLにベタ書きでコードを書いてみます*1。なお、一部のWebブラウザでは動作しない可能性があります。

以下、読みやすくするためにHTMLの一部のコードも省略していますが、動かないということはないはずです。

GETで取得したデータをコンソールに表示する（だけ）

axiosを使ってGETメソッドで取得したデータをコンソールに表示するだけならば以下のHTMLでOKです。axios自体はCDNで呼び出しています。

<html>
<body>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    axios.get('https://yesno.wtf/api')
      .then(res => console.log(res.data))
  </script>
</body>
</html>

ここで用いている、GETメソッドで取得しているJSONは、yesno.wtfというサービスが提供しているJSONです。具体的には以下のような戻り値になります*2。

{
  "answer": "yes",
  "forced": false,
  "image": "https://yesno.wtf/assets/yes/10-271c872c91cd72c1e38e72d2f8eda676.gif"
}

また、resはGETメソッドの戻り値のオブジェクトです。res.dataと指定することで、戻り値のJSON部分を指定しています。

上記のHTMLをWebブラウザで読み込むと、コンソールに以下のように表示されます。これで最低限度ではありますが、axiosが使えました。

ボタンを押すとaxiosがデータを取得しにいき、Webページにそのデータを表示させる

発展として、Webページ上のボタンを押すとaxiosがデータを取得し、その戻り値をWebページ上に表示させる、というコードを書いてみます。

完成形としては以下のようになります。

<html>
<body>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <button id="axios-button">押して下さい</button>
  <div id="yes-no-answer">ここにanswerの戻り値が表示されます</div>
  <div id="yes-no-image-url">ここにimage(URL)の戻り値が表示されます</div>

  <script>
    function getYesNoWtf() {
      return new Promise(function(resolve, reject) {
        axios
          .get('https://yesno.wtf/api')
          .then(response => resolve(response.data))
        }
      );
    }

    document.getElementById('axios-button').onclick = function() {
      getYesNoWtf()
      .then(res => {
        document.getElementById('yes-no-answer').innerHTML    = res.answer
        document.getElementById('yes-no-image-url').innerHTML = `<img src="${res.image}">`
      })
    }
  </script>
</body>
</html>

上記をWebブラウザで読み込み、ボタンを押すと、以下のような表示になります。

説明

上記のコードの説明です。

ボタンと、戻り値を表示させる領域を定義する

押されるボタンを button id="axios-button" で定義しています
yesno.wtfのAPIの戻り値のうち、answerをdiv id="yes-no-answer"部分に、imageをdiv id="yes-no-image-url"に表示させるために各々 id を定義してimasu

JavaScript部分

function getYesNoWtf という関数が、axiosを実行している関数です
- 戻り値としてJSONを返してきます
document.getElementById('axios-button').onclick = function() { 以降の部分で、ボタンが押されたときに表示を変える挙動を行っています
- 具体的には以下のとおりです
  - ボタンが押される
  - getYesNoWtf()が実行され、JSONが取得できる
  - 取得できたJSONを所定の id 部分に埋め込む（置き換える）

補足

実際にはこのようにベタ書きで書くことは無いと思いますが、あくまで最小限で動かすことを目的としています
APIのレスポンスを待っている間に、Webブラウザ上の表示は変わらないので、何らかの待機ギミックを付け加えたりするのは一案です
- spin.jsなど
- then を使い、読み込み完了後に非表示にするなどすればいいでしょう
axiosはPromiseオブジェクトを返すので、getYesNoWtf() を実行した後に .then でチェーンしています
Promiseオブジェクトや同期・非同期についての理解は重要ですが、ここではその説明は省略します
- azuさんによる以下のページが大変詳しいので、一読をおすすめします