- サイト制作のノウハウと最適化を目指して-

2018.9.22SPA開発でaxiosを使えば簡単にAPI通信を実現!(Promise)

SPA開発でaxiosを使えば簡単にAPI通信を実現!(Promise)

最近モダンな開発であるSPA(Vus.js/Nuxt.js/AngularJS)を構築したときにREST APIを作って通信したい

でもajax(jQuery)は使いたくない、そんなときに便利なaxios(アクシオス)の紹介をしていきます。


前提

axiosとは

axios(アクシオス)は「ブラウザとnode.jsのためのPromiseベースのHTTPクライアント」です。

ES6 Promiseに対応しており同期通信・非同期通信どちらにも対応しています。

Promise
インターフェイスは作成時点では分からなくてもよい値へのプロキシです。Promiseを用いることで、非同期アクションの成功や失敗に対するハンドラを関連付けることができます。これにより、非同期メソッドは、最終的な値を返すのではなく、未来のある時点で値を持つ
Promise を返すことで、同期メソッドと同じように値を返すことができるようになります。
(参照元: MDN)

記事作成のための環境構成

axiosをインストールしよう

npmから導入

前提としてNode.jsがインストールされpackage.jsonが生成されてる状態からの作業になります。

次のコマンドを実行してaxiosをインストール

npm install axios --save

インストールが成功すればpackage.jsonにaxiosが追加されています

axiosのドキュメント

機能一覧表

前提として下記のコードを読み込んでいてください。

const axios = require('axios')

共通エイリアス

axiosは利便性のため全ての要求メソッドに次のエイリアスが付与されています。

項番メソッド概要
1axios.request(config)リクエストを実行(デフォルトはGET)
2axios.get(url[, config])GETリスエストを実行
3axios.delete(url[, config])DELETEリスエストを実行
4axios.head(url[, config])HEADリクエストを実行
5axios.options(url[, config])OPTIONリスエストを実行
6axios.post(url[, data[, config]]))POSTリスエストを実行
7axios.put(url[, data[, config]]))PUTリスエストを実行
8axios.patch(url[, data[, config]]))PATCHリスエストを実行

並列実行ヘルパー

複数の実行の返りを待って実行してくれる機能

項番メソッド概要
1axios.all(iterable)Promise.allのラッパーメソッド
2axios.spread(callback)axios.allの返り値を配列化

インスタンス作成

個別に設定した新しいaxiosインスタンスを作成することができます。

項番メソッド概要
1axios.create(config)axiosの設定ファイルを読み込みインスタンス化
2axios.getUri()インスタンス専用メソッド

axiosの使用例

GETパラメータをオブジェクトとして設定

const axios = require('axios')
axios.get('https://uiuifree.com', {
  params: {
    page: 1
  }
}).then(function (res) {
  console.log(res.data)
});

上記の設定内容

項番設定概要
1URLhttps://uiuifree.com
2MethodGET
2パラメータ?page=1

POSTパラメータをオブジェクトとして設定

const axios = require('axios')
axios.post('https://uiuifree.com', {
  params: {
    page: 1
  }
}).then(function (res) {
  console.log(res.data)
});

上記の設定内容

項番設定概要
1URLhttps://uiuifree.com
2MethodPOST
2パラメータ?page=1

HTTPステータスを取得

const axios = require('axios')
axios.get('https://uiuifree.com', {
  params: {
    page: 1
  }
}).then(function (res) {
  console.log(res.status)
});

上記の結果

200

シンプルなライブラリなので上記の例を押さえていれば、API通信も簡単にできますね。