1,545viewsこんにちは、CTOの奥田です。新年あけましておめでとうございます。昨年もたくさんの方にブログをご覧いただき、ありがとうございました。本年も気を引き締めてより一層良い制作ができるよう努めてまいります。2020年もどうぞよろしくお願いいたします。2020年1発目のブログはaxiosについてです。昨今のWebサイトは非同期でアレコレするのが当たり前になっています。axiosを使えば簡単に非同期処理を実装することができます。今回はそんなaxiosについてご説明したいと思います。APIを使用するさいごにaxiosとはaxiosとはブラウザやnode.js上で動くPromiseベースのHTTPクライアントです。jQueryで言うところのjQuery.ajaxであり、非同期にHTTP通信を行いたいときに容易に実装できます。Vue.jsでは非同期通信を行うのにaxiosを使うのがスタンダードとなっております。axiosのGitHubページインストールインストール方法は以下です。src="https://unpkg.com/axios/dist/axios.min.js"><script>GET通信GET通信はaxios.getメソッドを使用します。引数にパラメータ付きのURLを指定し、.then()で通信が成功した際の処理を書きます。.catch()でエラー時の処理を書きます。.finally()は通信が成功しても失敗しても常に実行されます。executed});レスポンスには以下のようなものが入ります。基本的にはresponse.dataにデータが返ることにだけ注意しておけば大丈夫です。toolで以下のようにして確認できます。[Network]タブを選択し、Allでも確認できますがXHRにするとHTTP通信したもののみを出力できます。HeaderやResponseを見ればどのような処理でどのようなものが返っているのかがひと目で分かります。GETで取得してDOMに追加する処理を書くと以下のようなことができます。scrollなコンテンツも作成できます。DemoをみるPOST通信POST通信はaxios.postメソッドを使用します。{console.log(error);});第2引数に送信したいデータを指定することでPOST送信できます。この時、値を$_POSTで受け取ろうとしても取得できません。値を受け取ってvar_dumpしたデモをみてください。Demoをみる上記を実行しても$_POSTに値が入っていないことがわかります。APIを使用すると簡単に実装できます。※ただし、URLSearchParamsはIE11には対応していないのでpolyfillを使用してください。errorconsole.log(error);}).finally(function(){})Demoをみるエラーハンドリングエラーとなった際にerrorに以下のような値が返ります。中身を確認し、どこに問題があるのかをすぐに確認することができます。Optionとして渡すことで様々な要求ができます。Configの項目をご覧ください。'Flintstone'}});例えばベーシック認証のかかったページへ通信を行いたい場合は以下のようにします。},})また、カスタムヘッダーやTokenを同時に送信したい場合など様々な設定があります。'Flintstone'}})さいごに非同期通信はいまや当たり前の技術ですが、初めてjQueryでさわった時は非常に感動したのを今でも覚えています。みなさんもぜひ使ってみてください。menuWorksBlogInformation。