axiosとは
- HTTP非同期通信ライブラリー。
- バックエンドとデータを受け渡しをする際に使うライブラリー。
- バックエンドと通信できるURLに非同期でアクセスしてget, post, update, deleteの作業を行うことができる。
axiosのメリット
- バックエンドとの通信時に自動的にデータをjson形式に変換する。
- リクエストをキャンセルすることができる。
- 幅広いブラウザー＆バージョンに対応。
- アップロードやダウンロード時に進行状況の情報を取得することができる。
axiosのデメリット
- 外部のライブラリーであるため、インストールが必要
axiosの特徴
- axiosから要請したレスポンスはPromiseのオブジェクトである。
- そのため、以下の使用方法のようにasyncとawaitを使って簡潔に記述することができる。
axiosの使用方法
- axiosをインストールして以下のように利用することができる。
javascript
async function getUser() {
try {
const response = await axios.get('/user?ID=12345') //非同期でURLにアクセスしてバックエンドからデータを受ける。
console.log(response)
} catch (error) {
console.error(error)
}
}
例外処理
バックエンドとのやりとり中にはさまざまな例外が発生するため、例外処理を行う必要がある。
やり方としては try & catch と await & catchが挙げられ、以下のように使うことができる。
try & catchパターン
javascript
async function getUser() {
try {
const response = await axios.get('/user?ID=12345') //非同期でURLにアクセスしてバックエンドからデータを受ける。
console.log(response)
} catch (error) {
console.error(error)
}
}
await & catchパターン
javascript
async function getUser() {
const res = await axios.get('/user?ID=12345')
.catch((err) => {
return err
})
}
axios以外の非同期処理方法
実は非同期処理にはaxios以外にも複数あり、代表的にはfetch, jQueryがあり、それぞれ使い方は異なるが、基本概念は変わらない。なお、fetchはES6から使えるようになった非同期処理のためのjavascriptの内に組み込まれたAPIである。以下は、axiosとfetchの違いについてまとめたものである。
axiosとfetchとの違い
| Axios | Fetch | |
|---|---|---|
| インストール | 必要 | いらない |
| JSON変換 | 自動変換 | 手動的に変換する必要あり |
| requestのキャンセル設定 | 可能 | 不可能 |
| ダウンロードプログレス | 利用可能 | 不可能 |
fetchの使い方
< GET >
javascript
const url = '/user?ID=12345';
fetch(url)
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.log(error);
});
< POST >
javascript
const url = '/user?ID=12345';
const params = {
name: '山田太郎',
email: 'taro@example.com',
password: 'secret'
};
fetch(url, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(params)
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.log(error);
});
jQueryの使い方
< GET >
javascript
const url = '/user?ID=12345';
$.get(url)
.done(data => {
console.log(data);
})
.fail(error => {
console.log(error);
});
< POST >
javascript
const url = '/user?ID=12345';
const params = {
name: '山田太郎',
email: 'taro@example.com',
password: 'secret'
};
$.post(url, params)
.done(data => {
console.log(data);
})
.fail(error => {
console.log(error);
});