WebDesigner's Memorandumウェブデザイナーの備忘録

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

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です。

レスポンス中身
response.dataレスポンスデータ
response.statusステータスコード
response.statusTextステータステキスト
response.headerレスポンスヘッダ
response.configコンフィグ

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を使ってユーザー名とパスワードを「:」で区切った文字列を変換しないといけなかったりします。

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね