背景

参考記事

・1分でわかるJavaScriptライブラリaxiosの超簡単な使い方
https://iwb.jp/javascript-library-axios-howto/

※ライブラリのURLがあるのでコピペで使える

手順

axiosライブラリを読み込ませる
axiosの記述を書く（今回はaxios.get）
通信成功時はthen、失敗時はcatch、「成功しても失敗しても」はfinallyを使う

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    
    <script>
        axios.get('https://jsonplaceholder.typicode.com/todos/1')
            //通信成功時の処理
            .then(function(res) {
                console.log(res.data)
            })
            
            //通信が失敗した時の処理
            .catch(function(err) {
                console.log(err)
                console.log('通信失敗')
            })

            //通信が成功しても失敗しても常に
            .finally(function(res) {
                console.log('finally')
            })
    </script>
</body>
</html>

一言

JavaScriptのXMLHttpRequestの挙動や概念が分かってきてから、axiosの意味が分かってきた。

ライブラリを使用するにしても、ベースになっている動き（今回はXMLHttpRequest）と概念を理解してからだと、その意味も分かってくるかも。

次はPOSTを理解したい。

事業会社にてコーダーをしています。制作は6年目。インプットしたことをアウトプットしています。