【React(初学者向け)】axios インスタンスの作り方 使い方

※本サイトにはプロモーション・広告が含まれています。

(最終更新月:2021年8月)

Django × ReactでWebアプリを制作しています

APIからデータをGET、POSTする際にaxiosのインスタンスを作成しておくと便利です

React初学者の方へ向けて、

axios インスタンスの作り方

を解説していきます!

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ(月間20万PV)/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

axios インスタンスの作り方

.create()で作成します

const axiosInstance = axios.create()

axiosインスタンスに引数を渡す

const axiosInstance = axios.create(
       baseURL="....com/api/", 
       timeout=3000, 
       headers={.... : ....}
       )

baseURL

例えば、ログイン、ログアウト、サインアップ、記事の投稿など全てのAPIが、

〇〇.com/api/

から始まるのであれば、baseURLを〇〇.com/apiとしておくことで、実際にGET、POSTする際はapi以下の記述のみでアクセスができるようになります

timeout

API取得する時間制限を指定します

ミリ秒(1000分の1秒)で記述をしますので、上記の例では3秒となります

headers

CSRFトークンやAuthorizationContent-Typeなどを設定する場合に使用します

axiosインスタンスを使う

axiosInstance
    .post("/accounts/login/", "{username: testuser, password: testpassword}") 

インスタンス名に続き、axiosのメソッドを続けます

URLには、インスタンス作成時に設定したbaseURLに続くURLを記述します

POSTの際は送信するデータを記述しましょう

なぜ、axios インスタンスを使うの??

インスタンスを作らずにaxiosを使用することはもちろん可能です

ただ、同じサーバーからデータをGET, POSTなどする際には、よく見ると重複している記述が多いのではないでしょうか?

インスタンスを作ることで、繰り返しの記述を省略でき、見た目のスッキリしたコードがかけるようになります

タイトルとURLをコピーしました