JavaScriptライブラリaxiosのインストール、使用方法を簡単に紹介します！

どうも皆さんこんにちは！銀太です！

もうオリンピックが始まってますね〜！

スポーツを見るのが好きなので、日本代表の選手がメダルを取ってくのを見るとテンションが上がります！

選手をガンガン応援してオリンピックを楽しもうと思ってます！

頑張れ日本代表！！！！

ってことで今回はJavaScriptライブラリaxiosを紹介したいと思います！

axiosとは

axiosとはブラウザやnode.js上で動くPromiseベースのHTTPクライアントです。

HTTP通信を超簡単に行うことができるJavaScriptライブラリであり、
非同期にHTTP通信を行いたい時にも容易に実装できちゃいます！

また、Vue.jsでは非同期通信を行うのにaxiosを使うのがスタンダードです。

自分も今の現場でVue.jsを使用してて、axiosを使ってデータを扱ってます！ 

axiosを使って出来る事をざっと説明するとこんな感じです！

axiosのインストール方法

axiosのインストール方法は以下になります！

// npmインストール
npm install axios

// bowerインストール
bower install axios

// yarnのインストール
yarn add axios

// cdnの追加
<script src="https://unpkg.com/axios/dist/axios.min.js"><script>

以上の4つのコマンドでaxiosのインストールは完了です。簡単ですね！

次はどうやってデータを取得、削除、登録出来るか紹介します！

ちなみに、npmやyarnの違いについて知りたい方が居たら、こちらで確認して下さい！
【Node】npmとyarnの違い ーパッケージ管理ツールー

axiosの使い方

ここからaxiosの使用方法を説明していきたいと思います。
今回はWebAPIを使用したいと思います！

今回はこちらのサイトのWebAPIのサンプルを使用してaxiosを使用します！
すぐ呼び出し可能なWebAPIのサンプル

axiosに使用するメソッドはいくつかあるので、簡単に紹介していきます！

GETメソッド

GETメソッドは一番シンプルなメソッドでaxiosのみならず外部から情報を取得する際の基本になるメソッドです。
通常のブラウザでサーバにアクセスする際もGETメソッドを利用しています。

// GET通信
axios.get('https://umayadia-apisample.azurewebsites.net/api/persons/Shakespeare')

 // thenで成功した場合、catchで失敗した場合の処理をかける
 .then(response => {
 console.log('取得出来たよ'); 
 }).catch(err => {
 console.log('失敗したよ');
 });

こちらのGETメソッドを使って通信が成功すればデータの取得が出来ます。

POSTメソッド

POSTメソッドはサーバーにデータを登録する際の基本になるメソッドです！

// POST通信
// POSTデータは、axios.postの第2引数で渡します.
const data = { firstName : 'Yohei', lastName : 'Munesada' };
axios.post('https://umayadia-apisample.azurewebsites.net/api/persons', data)

// thenで成功した場合、catchで失敗した場合の処理をかける
.then(response => {
 console.log('登録出来たよ'); 
}).catch(err => {
 console.log('失敗したよ');
});

こちらのPOSTメソッドを使って通信が成功すればデータの登録が出来ます。

PUTメソッド

PUTメソッドはデータの更新の際の基本になるメソッドです！
基本的は使い方はPOSTメソッドとほぼ同じです！

// PUT通信
// PUTデータは、axios.putの第2引数で渡します.
const data = { firstName : 'Yohei', lastName : 'Munesada' };
axios.put('https://umayadia-apisample.azurewebsites.net/api/persons', data)

// thenで成功した場合、catchで失敗した場合の処理をかける
.then(response => {
 console.log('更新出来たよ'); 
}).catch(err => {
 console.log('失敗したよ');
});

こちらのPUTメソッドを使って通信が成功すればデータの更新が出来ます。

DELETEメソッド

DELETEメソッドはサーバーのデータを削除する際の基本になるメソッドです！

// DELETE通信
axios.delete('https://umayadia-apisample.azurewebsites.net/api/persons/Kennedy')

 // thenで成功した場合、catchで失敗した場合の処理をかける
 .then(response => {
 console.log('削除出来たよ'); 
 }).catch(err => {
 console.log('失敗したよ');
 });

こちらのDELETEメソッドを使って通信が成功すればデータの削除が出来ます。

最後に

axiosって大体どんなものか理解してくれましたか？？

自分は現在入っている現場でaxiosを使ってデータを取得などしています！

今回の記事を呼んでくれてaxiosがどんなものか理解してもらえたら嬉しいです！

それでは皆さん、良い1日を！