Axios の使い方
最近では JavaScript で通信を行う方法として Fetch API が使用できますが、 ローレベルな API で構成されている Fetch API では満足できず、 高機能なライブラリを使用したいという方もいらっしゃるのではないでしょうか。
Axios とは？
Axios は Promise ベースで作成されたネットワーク通信用のライブラリです。 Fetch API と比べると、Axios はかなり高機能な印象があります。 例えば、リクエストやレスポンスのデータのフォーマットを変換したい場合、 Fetch API ではある程度自分で変換する必要がありましたが、 Axios では与えられたデータや設定内容から自動でフォーマットを変換してくれたりします。 また、Fetch API では、HTTP のステータスコード 4XX や 5XX が成功として扱われてしまい問題となることがありましたが、 Axios ではエラーとして扱ってくれますので、Fetch API よりも違和感のないコードが書けるのではないでしょうか。
Axios のインストール
さっそくですがインストールしていきましょう。
CDN を使用する
npm を使用する
npm を使用してインストールする場合は、下記のコマンドを実行します。 npm の使い方がわからないという方は、「Node.js と npm の使い方（その１：概要）」を参考にしてください。
npm install axios
npm を使用してインストールした場合は、使用したいファイルで読み込む必要があります。
CommonJS の場合は require()、ES Modules の場合は import を使用して読み込みます。
const axios = require('axios');
import axios from 'axios';
基本的な使い方
この記事ではリクエスト先の URL を全て「http://example.com/」で記述してありますので、 動作確認をしたい場合は、ご自身の環境に合わせて変更してください。
Axios でリクエストを送信するには axios() を使用します。
axios() の第1引数に JavaScript のオブジェクトを渡すと、リクエストの細かな設定ができます。
レスポンスは Promise で受け取ります。
axios({
method: 'get',
url: 'http://example.com/',
})
.then(function (response) {
console.log(response.data);
});
axios() の第1引数に URL を指定すると、デフォルトで GET リクエストになります。
細かい指定がメンドウな場合は、便利かもしれません。
axios('http://example.com/')
.then(function (response) {
console.log(response.data);
});
リクエストメソッド専用のメソッドを使用する
GET や POST などのリクエストメソッドには、
それぞれ専用のメソッドがエイリアス（別名）として用意されています。
例えば、GET リクエストの場合は axios.get()、
POST リクエストの場合は axios.post() が使用できます。
詳しい使用方法は後述します。
axios.get('http://example.com/')
.then(function (response) {
console.log(response.data);
});
axios.post('http://example.com/')
.then(function (response) {
console.log(response.data);
});
async、await を使う
Axios のレスポンスは Promise なので、async、await を使用して記述することもできます。
async、await の使い方がわからないという方は、「async、await の使い方」を参考にしてください。
async function http() { const response = await axios('http://example.com/'); console.log(response.data); } http();
GET リクエスト
GET リクエストを使用する場合は、
専用のメソッドである axios.get() を使用すると良いでしょう。
第1引数でリクエスト先の URL を指定します。
axios.get('http://example.com/')
.then(function (response) {
console.log(response.data);
});
GET リクエスト（クエリーパラメーター付き）
URL のクエリーパラメーターは、パラメーターのキーと値が URL エンコードされて = と & で繋がれている形式です。
Axios では URL にクエリーパラメーターを自動で付けてくれる機能が搭載されていますので、それを使用すると良いでしょう。
axios.get() の第2引数でリクエストの細かな設定ができます。
クエリーパラメーターを使用するには、params を使用します。
const data = {
val1: 'hoge',
val2: 'fuga',
};
axios.get('http://example.com/', {
params: data,
})
.then(function (response) {
console.log(response.data);
});
http://example.com/?val1=hoge&val2=fuga
POST リクエスト
POST リクエストを使用する場合は、
専用のメソッドである axios.post() を使用すると良いでしょう。
第1引数でリクエスト先の URL を、第2引数でリクエストボディに設定したい値を指定します。
また、第3引数でリクエストの細かな設定ができます。
POST リクエスト（テキスト形式）
テキスト形式でリクエストを送信したい場合は、axios.post() の第2引数に送信したいテキストを指定します。
なお、第2引数にテキストを指定した場合、リクエストヘッダーのデフォルトの Content-Type は application/x-www-form-urlencoded になります。
text/plain ではないので注意してください。
Content-Type に text/html を使用する場合
axios.post('http://example.com/', '<h1>example</h1>', {
headers: {
'Content-Type': 'text/html',
},
})
.then(function (response) {
console.log(response.data);
});
Content-Type: text/html
<h1>example</h1>
POST リクエスト（JSON 形式）
JSON 形式でリクエストを送信したい場合は、axios.post() の第2引数に JavaScript のオブジェクトを指定します。
第2引数に JavaScript のオブジェクトを指定すると、自動で JSON 形式に変換してくれます。
リクエストヘッダーの Content-Type に application/json を設定してくれますし、
リクエストボディも自動で JSON 形式に変換してくれます。
const data = {
val1: 'hoge',
val2: 'fuga',
};
axios.post('http://example.com/', data)
.then(function (response) {
console.log(response.data);
});
Content-Type: application/json
{"val1":"hoge","val2":"fuga"}
HTML のフォーム要素から設定する
送信されるデータを指定するのがメンドウな場合は、HTML のフォーム要素を使用すると良いでしょう。
但し、HTML のフォーム要素の中のファイルは JSON（Base64） 形式には自動で変換されませんので注意してください。
HTML のフォーム要素を使用する場合は、Content-Type に application/json を指定する必要があります。
<form id="testForm"> <input type="text" name="val1" value="hoge"><br> <input type="text" name="val2" value="fuga"><br> <input type="file" name="testFile"><br> <button type="button">submit</button> </form>
const formElement = document.querySelector('#testForm'); axios.post('http://example.com/', formElement, { headers: { 'Content-Type': 'application/json', }, }) .then(function (response) { console.log(response.data); });
送信されるデータを何か加工したい場合は、
HTML のフォーム要素から FormData オブジェクトに変換してから使用すると便利かもしれません。
この場合も Content-Type に application/json を指定する必要があります。
FormData オブジェクトに変換する場合
const formElement = document.querySelector('#testForm');
const formData = new FormData(formElement);
formData.append('val3', 'piyo');
axios.post('http://example.com/', formData, {
headers: {
'Content-Type': 'application/json',
},
})
.then(function (response) {
console.log(response.data);
});
POST リクエスト（application/x-www-form-urlencoded 形式）
application/x-www-form-urlencoded は、通常の HTML のフォームの内容を POST で送信する際に使用されている形式です。
リクエストボディの中身は URL のクエリーパラメーターと同じ形式で、
パラメーターのキーと値が URL エンコードされて = と & で繋がれている形式の文字列になります。
Content-Type: application/x-www-form-urlencoded
val1=hoge&val2=fuga
この形式を使用する方法は主に2つあります。
方法１：URLSearchParams オブジェクトを使用する
1つ目の方法は、axios.post() の第2引数に URLSearchParams オブジェクトを使用する方法です。
第2引数に URLSearchParams オブジェクトを使用すると、
自動で Content-Type に application/x-www-form-urlencoded が設定されます。
const data = {
val1: 'hoge',
val2: 'fuga',
};
axios.post('./api200.php', new URLSearchParams(data))
.then(function (response) {
console.log(response.data);
});
方法２：Content-Type で指定する
2つ目の方法は、axios.post() の第2引数に JavaScript のオブジェクトを指定して、
Content-Type に application/x-www-form-urlencoded を指定する方法です。
リクエストボディの変換処理は Axios が自動で行ってくれます。
const data = {
val1: 'hoge',
val2: 'fuga',
};
axios.post('http://example.com/', data, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
})
.then(function (response) {
console.log(response.data);
});
POST リクエスト（multipart/formdata 形式）
multipart/formdata は、HTML のフォームでファイルを送信する際に使用されている形式です。
この形式はリクエストボディを複数の部分（その名の通りマルチパート）に分割します。
それぞれのパートには別々の項目を格納できるため、ファイルを含めた複数の項目を1度のリクエストでまとめて送ることができます。
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryTYkANbMgZavU5qqH
------WebKitFormBoundaryTYkANbMgZavU5qqH Content-Disposition: form-data; name="val1" hoge ------WebKitFormBoundaryTYkANbMgZavU5qqH Content-Disposition: form-data; name="val2" fuga ------WebKitFormBoundaryTYkANbMgZavU5qqH--
この形式のリクエストを作成するには axios.post() の第2引数に FormData オブジェクトもしくは HTML のフォーム要素を使用します。
FormData オブジェクトもしくは HTML のフォーム要素を使用すると、
自動で Content-Type が multipart/formdata に設定されます。
パートごとの区切りである boundary も自動で設定されます。
FormData オブジェクトから設定する
送信されるデータを細かく指定したい場合は、FormData オブジェクトを使用すると良いでしょう。
const formData = new FormData(); formData.append('val1', 'hoge'); formData.append('val2', 'fuga'); axios.post('./api200.php', formData) .then(function (response) { console.log(response.data); });
HTML のフォーム要素から設定する
送信されるデータを指定するのがメンドウな場合は、HTML のフォーム要素を使用すると良いでしょう。
<form id="testForm"> <input type="text" name="val1" value="hoge"><br> <input type="text" name="val2" value="fuga"><br> <input type="file" name="testFile"><br> <button type="button">submit</button> </form>
const formElement = document.querySelector('#testForm'); axios.post('http://example.com/', formElement) .then(function (response) { console.log(response.data); });
送信されるデータを何か加工したい場合は、
HTML のフォーム要素から FormData オブジェクトに変換してから使用すると便利かもしれません。
FormData オブジェクトに変換する場合
const formElement = document.querySelector('#testForm');
const formData = new FormData(formElement);
formData.append('val3', 'piyo');
axios.post('http://example.com/', formData)
.then(function (response) {
console.log(response.data);
});
JavaScript のオブジェクトから設定する
axios.post() の第2引数に JavaScript のオブジェクトを使用したい場合は、
Content-Type に multipart/form-data を指定する必要があります。
Content-Type の boundary は自動で設定されます。
また、リクエストボディの変換処理も Axios が自動で行ってくれます。
const data = {
val1: 'hoge',
val2: 'fuga',
};
axios.post('http://example.com/', data, {
headers: {
'Content-Type': 'multipart/form-data',
},
})
.then(function (response) {
console.log(response.data);
});
axios.postForm() を使用する
axios.post() の代わりに、axios.postForm() を使用する方法もあります。
これは POST で multipart/formdata を送信するための専用のメソッドですが、
PUT を使用する場合は axios.putForm()、
PATCH を使用する場合は axios.patchForm() が使用できます。
第2引数には JavaScript のオブジェクト、FormData オブジェクト、HTML のフォーム要素などを使用することができます。
const data = {
val1: 'hoge',
val2: 'fuga',
};
axios.postForm('http://example.com/', data)
.then(function (response) {
console.log(response.data);
});
レスポンス
ステータスコードとステータスメッセージ
ステータスコードは .status で取得できます。
ステータスメッセージ（リーズンフレーズ）は、.statusText で取得できます。
なお、HTTP/2 にはステータスコードしかなく、ステータスメッセージは無いので注意してください。
axios.get('http://example.com/')
.then(function (response) {
console.log('response.status: ' + response.status);
console.log('response.statusText: ' + response.statusText);
});
response.status: 200 response.statusText: OK
レスポンスボディ
レスポンスボディの内容は、.data で取得できます。
なお、.data の内容は、デフォルトでは JSON 形式が前提になっており、
自動で JSON パースされて JavaScript のオブジェクトに変換されます。
Content-Type の値が application/json 以外の場合でも JSON パースされますので注意してください。
JSON 形式以外のレスポンスを受け取る
JSON 形式以外のレスポンスを受け取りたい場合は、
リクエスト送信時に responseType で、レスポンスの形式を指定しておく必要があります。
axios.get('http://example.com/', {
responseType: 'text',
})
.then(function (response) {
console.log(response.data);
});
axios.get('http://example.com/', {
responseType: 'blob',
})
.then(function (response) {
console.log(response.data);
});
