HTTP通信をラクに実装できる「axios」の基本

最近、HTTP通信にaxiosを使う機会があったので、基本的な使い方からエラー処理などまで、備忘録として基本的な部分をまとめておきます。

axios

まずaxiosは「アクシオス」と読み、もともとギリシャ語で「値する」という意味らしいです。

PromiseベースのHTTPクライアントで、非同期なHTTP通信が簡単に実装できます。
また、Vue.jsでは非同期通信にaxiosを使うことがスタンダードになっています。

インストール方法

npmを使ってインストールする場合は下記。

$ npm install axios --save

yarnの場合は下記コマンド。

$ yarn add axios

CDNを利用する場合のタグを追加します。

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

基本の使い方

GET通信

GET通信をしたいときはaxios.get()を使用します。

第1引数にURLを指定し、通信の結果によってそこから分岐します。

• .then()：通信が成功したときの処理
• .catch()：エラー時の処理
• .finally()：通信が成功しても失敗しても行う処理

axios.get('URL')
.then(function (response) {
  // 通信が成功したときの処理
  console.log(response);
})
.catch(function (error) {
  // エラー時の処理
  console.log(error);
})
.finally(function () {
  // 常に実行する処理
});

レスポンスは下記になります。
response.dataにデータが入っているので、そこさえ覚えておけばOKです。

POST通信

POST通信をしたいときはaxios.post()を使用します。

第1引数にURLを指定し、第2引数に送信したいデータを指定します。

axios.post('/user', {
  id: 1,
  name: 'user_name'
})
.then(function (response) {
  // 通信が成功したときの処理
  console.log(response.data);
})
.catch(function (error) {
  // エラー時の処理
  console.log(error);
})
.finally(function () {
  // 常に実行する処理
});

axios APIの使用

axios()で様々なオプションを指定することで、カスタムヘッダーの送信やTokenの送信、ベーシック認証のかかったページへの通信も可能です。

GET通信の基本の形が下記になります。

axios({
  method: 'get',
  url: 'GETするURL',
})

POST通信の場合は下記になります。

axios({
  method: 'post',
  url: 'POSTするURL',
  data: {
    id: 1,
    name: 'user_name'
  }
});

カスタムヘッダーの送信

カスタムヘッダーの追加は「headers」で行えます。

axios({
  method: 'post',
  url: 'POSTするURL',
  headers: {
    // ここにカスタムヘッダーの内容を追加
  },
})

ベーシック認証のかかったページへの通信

ベーシック認証のかかったページへの通信を行いたい場合は「auth」内の「username」と「password」にユーザー名とパスワードを入力するだけです。

axios({
  method: 'get',
  url: 'GETするURL',
  auth: {
    username : 'user',
    password : 'pass'
  },
})

fetchなどでベーシック認証をしようとすると、btoaを使ってユーザー名とパスワードを「:」で区切った文字列を変換しないといけなかったりします。

それと比べると分かりやすくてラクですね。