Vue.js Axiosを使ってリクエストを投げてレスポンスを受け取ってみる

# 概要

- Vue.js Axiosを用いてDog APIにリクエストを投げてランダムで返される犬の画像を表示する方法をまとめる

# 詳細

- より簡単に体験するためhtmlファイルにVue.jsとAxiosをCDNで使えるようにする。

# 方法

1. 下記のようなindex.htmlファイルを用意する。

    ```index.html
    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>犬の画像取得テスト</title>
    </head>
    <body>
        
    </body>
    </html>
    ```

1. headタグ内に下記の様にscriptタグを用いてAxios → Vue.jsの順でCDNを用いてリンクさせる。

    ```index.html
    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>犬の画像取得テスト</title>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    </head>
    <body>
        
    </body>
    </html>
    ```

1. bodyタグ内部に仮想DOMを定義し、その中で画像の表示と表示ボタンを設置する。

    ```index.html
    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>犬の画像取得テスト</title>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <button @click="getDogImage">表示</button>
            <br>
            <img :src="this.dogImage">
        </div>
    </body>
    </html>
    ```

1. scriptタグを用いてVueのインスタンスを作り、いくつかの処理を記載する。

    ```index.html
    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>犬の画像取得テスト</title>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <button @click="getDogImage">表示</button>
            <br>
            <img :src="this.dogImage">
        </div>
        <script>
            const url = 'https://dog.ceo/api/breeds/image/random'
        
            let app = new Vue({
                el: '#app',
                data(){
                    return{
                        dogImage: ''
                    }
                },
                methods: {
                    getDogImage(){
                        const response = axios.get(url).then(({ data }) => {
                            this.dogImage = data.message
                        })
                    }
                },
                created(){
                    this.getDogImage()
                }
            })
        </script>
    </body>
    </html>
    ```

1. 当該のindex.htmlファイルをブラウザで開くとランダムで返された犬の画像が表示され「表示」のボタンをクリックすると犬の画像が切り替わる。

# 参考文献

- [https://jp.vuejs.org/v2/guide/installation.html#CDN](https://jp.vuejs.org/v2/guide/installation.html#CDN)
- [https://axios-http.com/docs/intro](https://axios-http.com/docs/intro)
- [https://dog.ceo/dog-api/](https://dog.ceo/dog-api/)