2024-02-04
JS・TS パッケージ

初めてでも分かるaxiosの備忘録

Featured image of the post

はじめに

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メソッドごとに関数が用意されている✨

参考サイト

公式ドキュメント

Axiom 入門 | Axios Docs
Favicon of the bookmark site
https://axios-http.com

分かりやすいサイト

Reactを使ってaxiosを学ぶ | アールエフェクト
フロントエンドとサーバ間でデータを送受信する場合に主にaxiosやfetchが利用されます。本文書ではReact環境でaxiosを利用することでaxiosの各種メソッドの設定方法と処理方法について説明を行っています。axiosだけでなくReactでの処理も同時に学ぶことができます。
Favicon of the bookmark site
https://reffect.co.jp
Site image of the bookmark