【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の特徴

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

対応ブラウザ

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

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

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

$ npm install axios

bowerを使う場合、

$ bower install axios

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

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

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

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

axiosを使う準備をする

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

// requireを使う場合
const axios = require('axios');

// ES6の場合
import axios from 'axios';

GETリクエストを送る

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

// IDを付加したurl
axios.get('/user?ID=12345')
　　　　//thenで成功した場合
  .then(function (response) {
    console.log(response);
  })
　　　　//chachでエラーの挙動を定義
  .catch(function (error) {
    console.log(error);
  });
 
// オプション的な書き方はこちら
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

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

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

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

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

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

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

// configオブジェクトを使ったGET通信の例
axios({
    method : 'GET',
    url    : 'http://~~~指定したURL'
}).then(response => console.log(response.status)); //200

POST通信の場合

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

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

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

スポンサードリンク

responseの構造を確認する

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

axios.get('送信先URL').then(function(response) {
    console.log(response.data);        // レスポンスデータ
    console.log(response.status);      // ステータスコード
    console.log(response.statusText);  // ステータステキスト
    console.log(response.headers);     // レスポンスヘッダ
    console.log(response.config);      // config
  });

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

エラーハンドリング

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

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // このリクエストはステータスコードとともに作成されます
      // 2xx系以外の時にエラーが発生します
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // このリクエストはレスポンスが返ってこない時に作成されます。
      // `error.request`はXMLHttpRequest　のインスタンスです。
      console.log(error.request);
    } else {
      //それ以外で何か以上が起こった時
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

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

axios.get('/user/12345', {
  validateStatus: function (status) {
    return status < 500; // ステータスコードが500以上の時リジェクト
  }
})

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

タイムアウト設定

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

// タイムアウトを設定
axios.get(指定したURL', { timeout : 1000 })
    .then(response => console.log(response.status));

// configオブジェクトの場合
axios({
    method  : 'GET',
    url     : 'http://localhost:3000/users',
    timeout : 1000
}).then(response => console.log(response.status));

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

まとめ

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

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

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

こういった知識を1人で勉強することは可能ですが、効率よくプログラミングを学習したいのであれば「テックブースト」をオススメします。こういったWebの疑問がオンラインで聞き放題です。無料カウンセリングも行なっているので一度話を聞きに行ってみるというのもアリだと思います。

話題のプログラミングスクール「テックブースト」とは！？

スポンサードリンク