📖

axiosのcreateを使おう

2024/02/03に公開

最近の気づき

今までaxiosを使うときに、以下のようにして共通するURLの部分を使いまわしていました。

env

NEXT_PUBLIC_API_BASE= "https://api.unko.com/"

sample.tsx

 const response = axios get
      .get(process.env.NEXT_PUBLIC_API_BASE + '/read', 
      )

ですが、axios.createという関数があり、そこで上記のような共通して使うAPIのURLを設定できます。

sample.tsx

import axios from 'axios'

const api = axios.create({
  baseURL: 'https://api.unko.com/',
})

上記のように設定すると、baseURLをプロパティにもつaxiosのインスタンスを作成できます。なので、使うときは以下のように使えます。

sample.tsx

const response = await api
      .get('/read', {
      })

process.envを毎回使うよりもインスタンスを作成した方が、APIのパスを間違えるといったことは少なそうです。また、create関数にはheadersというキーにバリューを渡すこともできます。ちょっとだけaxiosで楽にAPIが叩けるようになる話でした。