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

React

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

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

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

React初学者の方へ向けて、

axios インスタンスの作り方

を解説していきます!

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をコピーしました