【JavaScript】axiosとは:特徴やインストール方法について

時計 2023.09.13 / 時計

【JavaScript】axiosとは:特徴やインストール方法について

記事ではJavaScriptでAjaxを実現するライブラリであるaxiosについて詳しく解説していきます。

axiosとはJavaScriptでHTTP通信を行うためのライブラリです。Vue.jsのフレームワークを利用している場合、非同期通信にaxiosを使うことがデファクトスタンダードです。

本記事を通して、axiosの特徴やインストール方法について理解を深めてください。

Ajaxとは

Ajax(Asynchronous JavaScript + XML)とはJavaScriptとXMLを使用してWebサーバーと非同期通信を行う技術です。Ajaxを使うことでページの読み込み(ページ遷移)を行わず動的にページの一部をサーバーから受け取ったデータを元に更新することができます。

IT用語の確認

非同期通信とはコンピュータ間でデータの送信・受信のタイミングを合わさずに通信を行える通信方式。要求を出したコンピュータは、応答を待つことなく別の処理を行えます

Ajaxの特徴は以下の通りです。

  • ページ全体の更新を行わずに、ページの一部のコンテンツのみを更新できる
  • Webサーバーとの通信中でもページ操作が可能
  • ページの全体読み込み(ページ遷移)がないため、画面が真っ白になることがない
  • 動的にサーバーから取得したデータをページに反映できる
  • ユーザビリティが向上する

AjaxにはXMLの頭文字が付いていますが、現在ではサーバーとクライアント間のデータ通信はJSONが利用されることがほとんどです。JSONについては以下記事をご参照ください。

axios

axiosとは

axios(アクシオス)とはJavaScriptでHTTP通信を行うためのライブラリであり、Promiseを使ってAjax(非同期通信)を実現できるようになります。

axiosはWebアプリケーションでAPIと通信する際に便利で、Vue.jsといったAjax通信の機能が備わっていないJavaScriptフレームワークと共に使われます。

参考情報

jQueryの場合はajax()メソッドでAjax通信を行います。Promiseオブジェクトにdone()やfail()を連結してPromiseの状態によって処理を分けます。jQueryではAjax機能が備わっているためaxiosを利用することはほとんどないです

関連リンク:【jQuery】done()メソッドとは:Ajax通信後に処理を実行する

APIとの通信で利用されるため、REST APIのWebアプリケーション開発で使われることが多いです。

axiosはWebアプリケーション開発でAPI通信やリアルタイムのデータ更新を実現したい場合の選択肢の一つとなります。

axiosの特徴

axiosは以下の特徴を持っています。

axiosの特徴
  • PromiseベースのAPIを提供し、簡単な読みやすいコードで非同期通信を可能にする
  • GET、POST、DELETE、PUTなどのHTTPリクエストをサポート
  • コードの書き方はjQuery Ajaxに似ている

axiosのインストール

axiosを使用するにはnpmでインストールする、またはCDMリンクを設置する必要があります。

npmでインストールする場合は以下のコードを実行してください。

npm install axios

CDMリンクを設置する場合は以下コードをheadタグ内に入れてください。

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

axiosのサンプルコード

axiosでGETリクエストはaxios.get()を使用します。第一引数にはURLを指定します。

then()で通信が成功した際の処理を書き、catch()でエラー時の処理を書きます。GETリクエストのサンプルコードを以下に記します。

axios.get('https://api.office54.net/data')
  .then(response => {
    console.log(response.data);
  }).catch(error => {
    console.error(error);
  });

axiosでPOSTリクエストはaxios.post()を使用します。第一引数にURL、第二引数に送信するデータを指定します。

POSTリクエストのサンプルコードを以下に記します。

axios.post('https://api.office54.net/create', { name: 'office', age: 20 })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

その他にPUTリクエストではaxios.put()、DELETEリクエストではaxios.delete()を使用します。