React axios RailsAPIを叩いてみる

今回は、ハッカソン形式のインターンでAxiosを使って
Rails APIを叩く機会があったので、その備忘録です！
（少し解説あります！）

内容

1. Axiosとは
2. 実際に書いてみた

Axiosとは

簡単に言うと、APIをサクッと叩いてくれる便利なやつです。
APIを利用するときに、このパスをGETのメソッドで送ってねとか
あるのですが、この説明通りに実装できるのがAxiosです。

厳密にはHTTP通信、Promiseの云々カンヌンありますが
気になる人は、公式サイトを見てみたり、JS自体を勉強したりしてみましょう〜

今回は、解説＆コード全部載せてるので
コードだけ欲しいよ！という人は「コードの全容」に飛んでくださいね！

解説

導入手順

導入手順は以下のように進めます。

1. npm or yarnでaxiosをインストール
2. インポート（自分のファイルで使えるようにする）
3. 基本的な設定を作る
4. 便利な関数を作成する

1. npm or yarnでaxiosをインストール

ターミナルで以下のコマンドを実行します。

ターミナル

% npm i axios

他の様式でのインストール方法は↓に載ってます！

2. インポート（自分のファイルで使えるようにする）

axiosをインポートし、自分のファイルの中で使えるようにします

import axios from 'axios'

3. 基本的な設定を作る

const DEFAULT_API_CONFIG = {
  baseURL: 'http://0.0.0.0:4000/api/v1',
  timeout: 5000,
  mode: 'cors',
  credentials: 'include',
  headers: {
    ContentType: 'application/json',
    Accept: 'application/json',
  },
}

• baseUrlは、APIを叩く上で、ほぼ毎回叩くURL（固定のようなもの）を指定します。
• timeoutは通信関連ですが、特に通信の制約があるとかない場合は無視でOKです！
• modeはcors(Cross-Origin Resource Sharering)を指定します。
  • corsはクライアントが自分と違うオリジンをもつサーバーからデータを取得する仕組みのこと
  • RailsのAPI側で予め仕込む必要があります
• credentialsはincludeですが、特に気にしなくていいです
• headersは、HTTP通信で送るヘッダー部分です。
  • 今回はRailsでJSONを返すので、jsonとしています

こんな感じで色々設定します！
もう少し知りたい方は↓です！

4. 便利な関数を作成する

4-1. Axiosのインスタンスを作る関数

const newAxiosInstance = () => {
  const instance = axios.create(DEFAULT_API_CONFIG)

  instance.interceptors.response.use(
    (response) => {
      if (process.env.NODE_ENV === 'development') {
        console.log(response)
      }
      return response
    },
    (error) => {
      return Promise.reject(error)
    },
  )

  return instance
}

まず、GET、POSTのメソッドでAPIを叩くにしても
Axiosの仕様的に、インスタンスを作っておく方が便利そうです。
（作らない場合は、少しコードが伸びるので😅）

また、interceptorsでは、リクエストやレスポンスが
thenやcatchで処理される前にもらえるデータの設定をすることができます。

Interceptorsについて知りたい方は↓です！

4-2. インスタンスを利用したGETでAPIを叩く関数

export const getAPIData = async (path: string) => {
  const instance = newAxiosInstance()
  try {
    const response = await instance.get(path)
    return response
  } catch (error: any) {
    return error.response
  }
}

ここでは、先ほど作成したインスタンスを作る関数を利用しています。
APIを叩くときは非同期処理なので、関数自体にasync、実際に非同期処理になる
ところの前にawaitをつけます。

Axiosでは、instanceのメソッドでget,postを指定できるので、
今回はgetを指定します。

この関数では、BaseUrlの後ろに続くURLのパスを入れるだけでGETメソッドで
APIを叩いてくれます。これでAxios？？ってなる人でも簡単に使えますね〜！

4-3. インスタンスを利用したPOSTでAPIを叩く関数

export const postAPIData = async (path: string, params: object) => {
    const instance = newAxiosInstance()
    try {
        const response = await instance.post(path, params)
        return response
    } catch(error: any) {
        return error.response
    }
}

ここでも先ほど作成したインスタンスを作る関数を利用しています。
大体GETの関数と同じですが、paramsを渡す点が異なります。
POSTでは、データをAPIに送る役割があり、大体DB内のIDを使って
取得するものや、DBに登録する際に使います。
その時に必要な情報をparamsに入れて、送ります。

この関数では、先ほどのGETの関数と同じパスに加え
POSTとして必要な情報を引数に渡すだけでPOSTできちゃいますね！
（関数名が微妙なのはスルーで😇）

コードの全容

完成版は↓↓↓です！

axiosUtl.ts

import axios from 'axios'

const DEFAULT_API_CONFIG = {
  baseURL: 'http://0.0.0.0:4000/api/v1',
  timeout: 5000,
  mode: 'cors',
  credentials: 'include',
  headers: {
    ContentType: 'application/json',
    Accept: 'application/json',
  },
}

const newAxiosInstance = () => {
  const instance = axios.create(DEFAULT_API_CONFIG)

  instance.interceptors.response.use(
    (response) => {
      if (process.env.NODE_ENV === 'development') {
        console.log(response)
      }
      return response
    },
    (error) => {
      return Promise.reject(error)
    },
  )

  return instance
}

export const getAPIData = async (path: string) => {
  const instance = newAxiosInstance()
  try {
    const response = await instance.get(path)
    return response
  } catch (error: any) {
    return error.response
  }
}

export const postAPIData = async (path: string, params: object) => {
    const instance = newAxiosInstance()
    try {
        const response = await instance.post(path, params)
        return response
    } catch(error: any) {
        return error.response
    }
}

exportのおかげでimportするだけで色んなファイルの中で使えて
毎回毎回別のコンポーネントで定義しなくていいので
少し楽になりますね！

今回は以上になります！
若干メモ感ありますが、気になる方は以下の公式を見てみてください🌸