WEB系の技術を詳しく解説

【JavaScript】axiosを使って、HTTP通信を簡単に操る。

久しぶりの投稿です。最近色々勉強しまくってて、手を出しまくってる分野が増えてきているので自分の細かい抜け落ちた知識を補完する意味も込めて、今回はHTTP通信で用いることができるJavaScriptライブラリのaxiosについて記事を書いていこうと思います。

axiosとは

axiosとは、HTTP通信を簡単に扱えることができるJavaScriptライブラリです。HTTPリクエストを送ったり、JSONを取得したりするのがより簡単になるので愛用者が多いのが特徴です。

公式(npmjs.com)では

Promise based HTTP client for the browser and node.js

と一行で簡単に説明されています。要は、ブラウザとnode.jsに最適化された、PromiseベースのHTTPクライアントであるという事です。ここら辺、勉強している人であればなんとなく理解できるのですが、node.jsもPromiseも勉強していない人は「何を行っているんだ?」となりそうですね笑。しかし安心してください、思ったより扱うのは簡単です。

axiosの特徴

・ブラウザを介したXMLHttpRequestsを作成可能

・node.jsでHTTPリクエストを作成可能

・Promise APIをサポート

・リクエスト、レスポンスをキャッチすることができる

・リクエストやレスポンスデータを整形可能

・リクエストのキャンセル

・JSONデータの自動整形

・XSRFに対するクライアントサポート有

HTTPの仕組みを理解している人は、ふむふむなるほどという感じで雰囲気を掴み取ってください。さっぱりわからない人はコードを見てその便利さを実感しましょう。

対応ブラウザ

ほぼ全てのブラウザに対応しています。IEに関しては8+から、基本的に最新版のブラウザに対応していますね。

axiosをインストールしてみよう

axiosでHTTP通信を行うにはまず、axios本体が必要です。npmでaxiosをインストールします。

bowerを使う場合、

この様にしてインストールしましょう。

また、CDNにも対応しています!気軽に使えるのでまずはこちらで試してみてもいいでしょう。

CDNを使うにはスクリプトタグでこの様に記述します。

axiosを使う準備をする

さて、axiosをインストールしたら、実際にコード内でaxiosを使用するための準備を行います。準備とは、axiosの読み込みです。

GETリクエストを送る

ここまででaxiosを使う準備が整いました!まずはGETリクエストの例から解説していきます。

さて、axiosは上でも説明した通りPromiseベースです。よってPromiseに少し似た書き方でHTTP GETリクエストを実現することができます。しかしながら、一部Promiseは書き方が少々煩雑で(理解できないほどではないですが…)、Promiseオブジェクトのインスタンスを作成したり、エラーハンドリングが難解な部分があるので実際に使うのはaxiosよりかはおすすめしません。

axiosではメソッドチェーンのようにチェーンすることで非常にシンプルにプログラムを書くことができます。

axios.get(‘HTTP GETリクエストを送信する送信先のURL’)

こうすることでGETリクエストを送ることが可能です。その後、.then()メソッドの中にresponseを引数に取ったコールバック関数を定義します。さらにそこからメソッドチェーンで.chach()メソッドをチェーンすることでエラーをキャッチすることができます。非常にシンプルな構文です。

function部分はES6構文でももちろん書くことが可能です。

また、axiosにconfigオブジェクトを渡す書き方もできます。

POST通信の場合

POST通信はGET通信の時とほぼ同じで、GET通信はaxios.get()メソッドを使用するのに対してPOST通信はaxios.post()メソッドを使用するだけです。

ちなみに今回の例のpost()メソッドに渡すパラメータとしては、第1引数に通信先のURL、第2引数にconfigオブジェクトを渡しています。

responseの構造を確認する

responseオブジェクトには様々なデータが入ってるので、今一度確認しておきましょう。

基本的にはレスポンスデータを取得します。ステータスコード・テキスト等の用語がわからない方は、別途検索してみてください。ステータスコードが2xx系以外だと、レスポンスはエラーとして返されます。次に、エラーハンドリングの方法を解説します。

エラーハンドリング

axiosのエラーハンドリングは非常に直感的です。

2xx系以外の時にエラーとして解釈されると書きましたが、自分でそのレンジを設定することも可能です。

上の場合は5xx以外ならthen()で処理できるようなレンジに設定しています。

タイムアウト設定

HTTPリクエストにタイムアウト設定をすることも可能です。

timeoutに設定する単位は[ms]なので、上の場合は1sのタイムアウトに設定しています。

まとめ

axiosでHTTP通信を操る方法、使い方について解説してみました。この記事はnpm公式のaxiosのページより例を参照して作成したので、より詳しい情報が知りたい方はこちらのURLに書かれているドキュメントを読んでみるのも良いかもしれません。

axiosは慣れたら非常に使いやすいJavaScriptのライブラリだと思うので、これからしっかり活用していこうと思います。

みなさんも是非使ってみて下さい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です