はじめに
JavaScriptのライブラリ「axios」について学んだときの備忘録✨
初心者目線でまず初めに知りたかったポイントをまとめる😊
この記事で伝えたいこと
- axiosって何?
- 使うための準備は必要?
- どうやって使う?
結論
✅axiosはfetchを進化させたようなライブラリ。
✅axiosを使う方法は二択。(CDNから読み込むか、npm等でインストールする)
✅axios.get(url)
のような関数で簡単にHTTPリクエストができる。
axiosって何?
ざっくり解説「シンプルにHTTPリクエストができるfetchが進化したライブラリ」
axiosでできること
✅以下の関数を使ってHTTPリクエストができる。
GET | axios.get(...) |
DELETE | axios.delete(...) |
POST | axios.post(...) |
PUT | axios.put(...) |
※その他の関数は公式ドキュメントを参照。
どこで使える?
✅フロントエンド(ブラウザ)でもバックエンド(Node.js)でも使える!
axiosのいいところ
✅fetchよりも簡単に書くことができる。
fetchで面倒なポイント
- エラーハンドリング:
response.ok
をチェックして手動でエラーを投げる必要がある💦 - データ変換:
.json()
メソッドを呼び出して明示的に変換が必要💦
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('There was a problem with your fetch operation:', error));
axiosで楽になるポイント
- エラーハンドリング: 200番台以外のステータスコードが返された場合、自動的にエラーがキャッチされる✨
- データ変換:レスポンスボディが自動的にJSONとして解析される✨
axios.get('https://api.example.com/data')
.then(response => console.log(response.data))
.catch(error => console.error('There was a problem with your axios operation:', error));
準備
フロントエンドで使う場合
✅HTMLファイルでCDNを読み込むだけで準備完了。
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
バックエンドで使う場合
✅axiosのパッケージをインストールする。
npm install axios
✅axiosを使いたいファイルにインポート処理を書く。
// axiosをインポートする
import axios from 'axios';
※実際はExpressやNext.jsの中でaxiosを使うことになるがここでは触れない。
axiosの使い方
ここでは基本となるGET, POST,PUT, DELETEの4種類について解説する。
はじめに知っておくべきこと
非同期関数である
axiosの関数は非同期関数なのでthen
やasync
と組み合わせて使う。
レスポンスの中身
HTTPレスポンスには以下のデータが含まれる。
{
// サーバーから提供されたレスポンス
data: {},
// サーバーのレスポンスに含まれる HTTP ステータスコード
status: 200,
// サーバーのレスポンスに含まれる HTTP ステータスメッセージ
statusText: 'OK',
// サーバーが応答した HTTP ヘッダー
// ヘッダー名はすべて小文字で、ブラケット記法でアクセスできます。
// 例: `response.headers['content-type']`
headers: {},
// リクエストの際に `axios` に提供された設定
config: {},
// このレスポンスを生成したリクエスト
request: {}
}
参考:https://axios-http.com/ja/docs/res_schema
response.data
のように書くとデータが取れる。GET
✅get関数を使う。
axios.get(url)
引数
引数 | 必須/任意 | 型 | 説明 | 初期値 |
---|---|---|---|---|
url | 必須 | string | APIエンドポイントのURLを指定する。 |
戻り値
リクエストの完了を待つPromiseオブジェクト。
例:ユーザーデータを取得する
以下、どちらの書き方でもOK。
【パターン1】Promiseベースの書き方
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => console.log('GETリクエストが成功しました', response.data))
.catch(error => console.error('GETリクエストが失敗しました', error));
【パターン2】async/awaitベースの書き方
async function getUser() {
try {
// データ取得
const response = await axios.get('https://jsonplaceholder.typicode.com/users');
console.log('GETリクエストが成功しました', response.data);
} catch (error) {
// データ取得に失敗したとき
console.error('GETリクエストが失敗しました', error);
}
}
getUser();
実行結果
GETリクエストが成功しました [
{
id: 1,
name: 'Leanne Graham',
username: 'Bret',
email: '[email protected]',
address: {
street: 'Kulas Light',
suite: 'Apt. 556',
city: 'Gwenborough',
zipcode: '92998-3874',
geo: [Object]
},
phone: '1-770-736-8031 x56442',
website: 'hildegard.org',
company: {
name: 'Romaguera-Crona',
catchPhrase: 'Multi-layered client-server neural-net',
bs: 'harness real-time e-markets'
}
},
{
id: 2,
name: 'Ervin Howell',
username: 'Antonette',
email: '[email protected]',
address: {
street: 'Victor Plains',
suite: 'Suite 879',
city: 'Wisokyburgh',
zipcode: '90566-7771',
geo: [Object]
},
phone: '010-692-6593 x09125',
website: 'anastasia.net',
company: {
name: 'Deckow-Crist',
catchPhrase: 'Proactive didactic contingency',
bs: 'synergize scalable supply-chains'
}
},
省略
]
POST
✅post関数を使う。
axios.post(url, data, config)
引数
引数 | 必須/任意 | 型 | 説明 | 初期値 |
---|---|---|---|---|
url | 必須 | string | APIエンドポイントのURLを指定する。 | |
data | 任意 | object | POST送信するデータ。 | |
config | 任意 | object | リクエストの設定。 詳細は公式ドキュメントを参照。 |
戻り値
リクエストの完了を待つPromiseオブジェクト。
例:ユーザーデータを登録する
以下、どちらの書き方でもOK。
【パターン1】Promiseベースの書き方
axios.post('https://jsonplaceholder.typicode.com/users',{
name: '山田 太郎',
})
.then(response => console.log('POSTリクエストが成功しました', response.data))
.catch(error => console.error('POSTリクエストが失敗しました', error));
【パターン2】async/awaitベースの書き方
async function postUser() {
try {
const response = await axios.post('https://jsonplaceholder.typicode.com/users',{
name: '山田 太郎',
});
console.log('POSTリクエストが成功しました', response.data);
} catch (error) {
console.error('POSTリクエストが失敗しました', error);
}
}
postUser();
実行結果
POSTリクエストが成功しました { name: '山田 太郎', id: 11 }
PUT
✅put関数を使う。
axios.put(url, data, config)
引数
引数 | 必須/任意 | 型 | 説明 | 初期値 |
---|---|---|---|---|
url | 必須 | string | APIエンドポイントのURLを指定する。 | |
data | 任意 | object | PUT送信するデータ。 | |
config | 任意 | object | リクエストの設定。 詳細は公式ドキュメントを参照。 |
戻り値
リクエストの完了を待つPromiseオブジェクト。
例:ユーザーデータを更新する
以下、どちらの書き方でもOK。
【パターン1】Promiseベースの書き方
axios.put('https://jsonplaceholder.typicode.com/users/1',{
name: '山田 太郎',
})
.then(response => console.log('PUTリクエストが成功しました', response.data)) // eslint-disable-line no-console
.catch(error => console.error('PUTリクエストが失敗しました', error));
【パターン2】async/awaitベースの書き方
async function putUser() {
try {
const response = await axios.put('https://jsonplaceholder.typicode.com/users/1',{
name: '山田 太郎',
});
console.log('PUTリクエストが成功しました', response.data);
} catch (error) {
console.error('PUTリクエストが失敗しました', error);
}
}
putUser();
実行結果
PUTリクエストが成功しました { name: '山田 太郎', id: 1 }
DELETE
✅delete関数を使う。
axios.delete(url, config)
引数
引数 | 必須/任意 | 型 | 説明 | 初期値 |
---|---|---|---|---|
url | 必須 | string | APIエンドポイントのURLを指定する。 | |
config | 任意 | object | リクエストの設定。 詳細は公式ドキュメントを参照。 |
戻り値
リクエストの完了を待つPromiseオブジェクト。
例:ユーザーデータを削除する
以下、どちらの書き方でもOK。
【パターン1】Promiseベースの書き方
axios.delete('https://jsonplaceholder.typicode.com/users/1')
.then(response => console.log('DELETEリクエストが成功しました', response.data))
.catch(error => console.error('DELETEリクエストが失敗しました', error));
【パターン2】async/awaitベースの書き方
async function deleteUser() {
try {
const response = await axios.delete('https://jsonplaceholder.typicode.com/users/1');
console.log('DELETEリクエストが成功しました', response.data);
} catch (error) {
console.error('DELETEリクエストが失敗しました', error);
}
}
deleteUser();
実行結果
DELETEリクエストが成功しました {}
まとめ
- axiosを使うとfetchよりも簡潔にHTTPリクエストを送ることができる✨
- axiosはブラウザ側でも、Node.js側でも使うことができる✨
- get, post, put, deleteなどHTTPメソッドごとに関数が用意されている✨