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

（最終更新月：2021年8月）

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

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

React初学者の方へ向けて、

axios インスタンスの作り方

を解説していきます！

筆者プロフィール

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

【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

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

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

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

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

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

created by Rinker

¥2,640 (2024/04/24 14:20:49時点 Amazon調べ-詳細)

axios インスタンスの作り方

.create()で作成します

const axiosInstance = axios.create()

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

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

〇〇.com/api/

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

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

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

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

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

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

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

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

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

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

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