初めてでも分かるaxiosの備忘録 - らくらくエンジニア

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

参考サイト

公式ドキュメント

Axios 入門 | Axios Docs

https://axios-http.com

分かりやすいサイト

Reactを使ってaxiosを学ぶ | アールエフェクト

フロントエンドとサーバ間でデータを送受信する場合に主にaxiosやfetchが利用されます。本文書ではReact環境でaxiosを利用することでaxiosの各種メソッドの設定方法と処理方法について説明を行っています。axiosだけでなくReactでの処理も同時に学ぶことができます。

https://reffect.co.jp