【React】API通信をaxiosで実装してみて

API通信をaxiosで実装してみて

ReactでのAPI通信の備忘録として本記事を残すことにします
（コードとしては内容としては不十分な箇所多々あるかもしれません、、、）

Axiosを使ってみた

「React API」と検索したところ多く利用されているのがaxios。
実際に使ってみるとかなり便利かつコンパクト!

以下のコマンドでインストールができる

$ npm install axios

APIを叩いてみる

それぞれのパターンごとに記述してみる
あえて、APIを叩くURLを以下のように記述する

const url:string = 'https://********'

また、axiosのimportは忘れないように

import axios from 'axios'

GET(取得)

const [res,setRes] = useState([])
const getAPI = axios.get(url).then(result => {
            setRes(result);
        })

POST(登録)

POSTリクエストする場合は第1引数にURL、第2引数にデータが必要

const [res,setRes] = useState([])
const postAPI = axios.post(url,data).then(result => {
            setRes(result);
        })

ちなみに、第3引数としてヘッダーを渡すことも可能

const auth = headers: {
    Authorization: `****`,
  }
const [res,setRes] = useState([])
const postAPI = axios.post(url,data,{auth}).then(result => {
            setRes(result);
        })

詳しくはここらへん参照

実際に使うときはuseEffectと重ねて

axiosを使うときはuseEffectと併用すると使い勝手がいい

const [res,setRes] = useState([])
useEffect(() => {
    const getAPI = axios.get(url).then(result => {
            setRes(result);
        })
  },[]) 

useEffectの第2引数が空配列の場合は初回のレンダリングの際のみAPI通信ができる
初回レンダリング時に認証情報をGETし、二次利用したい場合などに使える
また、第2引数にPropsを渡すことでPropsが変更のたびにAPI通信が動くような仕組みも作ることができる

便利。。

参考記事

[axios] axios の導入と簡単な使い方
React hooksを基礎から理解する (useEffect編)