axiosライブラリを使って、柔軟にHTTP通信を行うTweetこんにちは、@yoheiMuneです。久しぶりなブログの更新で少しドキドキです。今日はよくお世話になっているaxiosというHTTPクライアントのライブラリの使い方を、ブログに書きたいと思います。目次axiosとはaxiosは、HTTP通信を簡単に行うことができるJavascriptライブラリです。本ブログのタイトルには「フロントエンド」と書きましたが、Node.JSでも利用できます。axiosの特徴して以下のような点が挙げられます。HttpReqestを簡単に生成できるPromiseベースであるカスタムヘッダーやBasic認証など、いろいろなオプションが手軽にできるインストールは簡単で、npm経由で導入できます。axiosそれでは、axiosの機能を具体的に見てみたいと思います。axiosを使うここからはaxiosの機能のうち、特によく使うものを見てみたいと思います。以下のようにaxiosを読み込みます。'axios';GET通信を行うGET通信を行うには、axios.get関数を用いることで実現できます。});上記のように、Promiseベースで成功時と失敗時の挙動を定義することができます。以下のようにaxiosにconfigオブジェクトを渡す形でも、GET通信を行うことができます。console.log(response.status));GET通信(パラメータ付き)GETパラメータはURLにつける(例:/users?name=Yohei)こともできますが、以下のようにparamsで渡すこともできます。console.log(response.status));POST通信POST通信を行う場合には、axios.post関数を用います。console.log(response.status));この辺りは、簡単にパラメータも渡せるので便利ですね。上記でGETやPOSTの扱いを見てきましたが、それらのレスポンスでは以下のような値を取得することができます。});バイナリーデータのダウンロードresponseTypeオプションはデフォルトではjsonですが、arrayBufferを指定することでバイナリーもダウンロードすることができます。response.data.length);});エラーハンドリングcatchでエラーを捉えた場合に、以下のようにエラー情報にアクセスすることができます。console.log(error.config);});エラー状態によって、いくつか取得方法が異なりますが、基本的にはerror.responseの中を調べることが多いかなと思います。何をエラーとして扱うかを定義するデフォルトでは、レスポンスのステータスコードが200系以外だとエラーとして扱われますが、どのステータスコードを正常/異常と扱うかは、独自に定義することができます。console.log(response.status));タイムアウトオプションでタイムアウト時間を設定することができます。console.log(response.status));カスタムヘッダーの付与アプリによっては独自のカスタムヘッダをリクエストに付与する必要がありますが、axiosならそれも簡単に行うことができます。console.log(response.status));Basic認証authオプションを使うことで、簡単にBasic認証を扱うことができます。console.log(response.status));今回のサンプルコード今回のクライアントと、サーバー側の実装は以下にコードを置きました。参考になれば幸いです。https://github.com/yoheiMune/frontend-playground/tree/master/014-axiosさらに詳しくaxiosのGithubページにて、オプションなど詳しく説明されていますので、適宜ご確認ください。https://github.com/mzabriskie/axios最後にaxiosはよく使うのですが、毎度調べてばかりだったので、今回ブログにノウハウをまとめて見ました。これでかなり効率的に使える気がしています。今後も良く使うライブラリはこんな感じでブログに残したいと思います。最後になりますが本ブログでは、フロントエンド・Node.js・Linux・インフラ・開発環境・Python・Go言語・Swift・Java・機械学習など雑多に情報発信をしていきます。自分の第2の脳にすべく、情報をブログに貯めています。フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。フロントエンドの入社試験99問!難しいですよ〜w。スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。Chrome36βが出た。Imports、Object.observe、他。ご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。Munesada)です。世の中をさらに便利に面白くをモットーにWeb界隈で活動しています。Now機械学習/AI/自然言語処理のホットな"今"をお届けするキュレーションメディアです。