Reactを用いて、Axiosの基本的な知識と使い方を説明する

環境

windows10
DockerDesktop for Win 3.5.x
node 16.13.1
axios 0.24.0
npm 8.1.2
TypeScript 4.5
React 17.0.1
Next.js 12.0.7
VsCode
gitbash 2.32.0.1

きほん

非同期でサーバーからデータを受信したり、サーバーへデータを送信したりすることが可能なライブラリ
Httpでの通信が可能なので、GET、POST、DELETE、PATCHメソッドの使用が可能
処理の結果(レスポンス)としてPromise型の値を返す
レスポンスはJSON形式なので特にパースの処理などは不要(Fetch APIは必要)
- 単にresponse.dataとするだけで、取得することが可能
404や500を受け取るとエラーを吐く(Fetch APIは吐かない)

書き方は以下の2通りくらい(のはず)

// 1.一般的な書き方
const res: AxiosResponse<POST[]> = await axios.get('/api/posts')

// or

// 2.オプションを作って渡す
const options: AxiosRequestConfig = {
  url: '/api/posts',
  method: 'GET'
}

const res: AxiosResponse<POST[]> = await axios(options)

// ----------------- res.dataにJSONデータが入っている
console.log(res.data)

使い方

インストール

yarn add axios

// or
npm install axios

インポート

実際に使用するファイルで直接importするのではなく、いったんAxios.createでインスタンスを作成し、baseUrlなどの共通部分をまとめたうえでしようするというテクニックがよく使われる

frontend\next-web\src\libs\axios.tsx

import Axios from 'axios'
const axios = Axios.create({
  baseURL: 'http://localhost:9020',
  headers: { 'X-Requested-With': 'XMLHttpRequest' },
  withCredentials: true
})


export default axios

Axiosで非同期処理を行う関数を作成

frontend\next-web\src\components\shared\function\Hooks\PostHooks.tsx

上記で作成したaxiosのインスタンスをimportして使用する

import React, { useCallback, useState, useEffect, useContext } from 'react'
import axios from 'libs/axios'
..

export const useFetchPosts = () => {
  const fetchPosts: FetchPosts = async () => {
    const options: AxiosRequestConfig = {
      url: '/api/posts',
      method: 'GET'
    }

    try {
      const res: AxiosResponse<POST[]> = await axios(options) // here!!
      return res
    } catch (error: any) {
      console.log(error)
    }
  }

  return {
    fetchPosts
  }
}

呼び出す

fetchPostsの戻り値はPromise型なので、awaitで受けて使用する

frontend\next-web\src\pages\index.tsx

import ..

const Home = () => {
  const [posts, setPosts] = useState<POST[]>([])
  const { fetchPosts } = useFetchPosts()

  useEffect(() => {
    (async () => {
      const posts: AxiosResponse<POST[]> = await fetchPosts() // here!!
      if (posts.data.length === 0) {
        return
      }
      setPosts(posts.data)
    })()
  }, [])
..

レスポンスの中身

Axiosのレスポンスの中身は型定義ファイルを参照することで何が入っているか確認することが可能
TypescriptのジェネリクスでJsonデータの型をパラメーター化している(T)
Jsonデータのほか、レスポンスのステータスやレスポンスヘッダなどの情報が入っている

export interface AxiosResponse<T = any, D = any>  {
  data: T;
  status: number;
  statusText: string;
  headers: AxiosResponseHeaders;
  config: AxiosRequestConfig<D>;
  request?: any;
}

以上です

まとめ

いかがでしたでしょうか。本記事では、Reactを用いてAxiosの基本的な知識と使い方を説明しています。モダンフロントエンド開発を行う上でいずれも必須の技術となってきますので、ぜひこの記事を参考にしてみてください