（最終更新月：2021年8月）
Django × ReactでWebアプリを制作しています
APIからデータをGET、POSTする際にaxiosのインスタンスを作成しておくと便利です
React初学者の方へ向けて、
axios インスタンスの作り方
を解説していきます！
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
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トークンやAuthorization、Content-Typeなどを設定する場合に使用します
axiosインスタンスを使う
axiosInstance
.post("/accounts/login/", "{username: testuser, password: testpassword}") インスタンス名に続き、axiosのメソッドを続けます
URLには、インスタンス作成時に設定したbaseURLに続くURLを記述します
POSTの際は送信するデータを記述しましょう
なぜ、axios インスタンスを使うの？？
インスタンスを作らずにaxiosを使用することはもちろん可能です
ただ、同じサーバーからデータをGET, POSTなどする際には、よく見ると重複している記述が多いのではないでしょうか？
インスタンスを作ることで、繰り返しの記述を省略でき、見た目のスッキリしたコードがかけるようになります