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

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

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

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

React初学者の方へ向けて、

axios インスタンスの作り方

を解説していきます！

運営者プロフィール

現在はIT企業のプロダクトマネージャーとして、個人向け/社内向けシステムなど、複数のシステム開発・運営に携わっています。

Webサイト構築やECサイトの開発経験に加えて、PythonなどのプログラミングやSalesforceなどのクラウドアプリケーションに関する幅広い知識・経験を活かして「プログラミング初心者がスムーズに学べるサイト」を目指しています。

Githubでは、趣味で作成したアプリなどを公開しています。

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

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

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

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

created by Rinker

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などする際には、よく見ると重複している記述が多いのではないでしょうか？

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