概要

現在udemyでReact.jsとNode.jsでECサイトを作成する講座を学んでいるのですが、その際axiosで使うメソッドを再利用するための方法が少し面倒で、こっちの方が良いんじゃないかと思ったのでここにメモを残しておきます。

udemy講座のやり方

// src/fucntions/auth.js
import axios from "axios";
export const createOrUpdateUser = async (authtoken) => {
  return await axios.post(
    `${process.env.REACT_APP_API}/create-or-update-user`,
    {},
    {
      headers: {
        authtoken,
      },
    }
  );
};

export const currentAdmin = async (authtoken) => {
  return await axios.post(
    `${process.env.REACT_APP_API}/current-admin`,
    {},
    {
      headers: {
        authtoken,
      },
    }
  );
};


// src/fucntions/category.js
export const updateCategory = async (slug, category, authtoken) =>
  await axios.put(`${process.env.REACT_APP_API}/category/${slug}`, category, {
    headers: {
      authtoken,
    },
  });

なんかごちゃごちゃして見づらいです。
メソッドを取り出して使う時もいちいちimportする際にメソッドを指定する必要があります。

import { createorUpdateUser, currentAdmin } from '../../functions/auth';
import { updateCategory } from '../../functions/auth';

const handleSubmit = (e) => {
    e.preventDefault();
    createCategory({ name }, user.token)
      .then((res) => {
        ...
}

クラス化

再利用しやすくするためaxiosのメソッドをクラスに入れます。

// src/utils/API.js
import axios from 'axios';


// 共通処理
const instance = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  timeout: 30000,
  cors: true,
})

// クラス化
class API {

 createOrUpdateUser(authToken) {
    return instance.request({
      method: 'POST',
      headers: {
        authToken,
      },
      url: '/create-or-update-user'
    });
  }

  currentUser(authToken) {
    return instance.request({
      method: 'POST',
      headers: {
        authToken,
      },
      url: '/current-user'
    });
  }
  
  updateCategory (slug, category, authToken) {
    return instance.request({
      method: 'PUT',
      headers: {
        authToken
      },
      url: `/category/${slug}`,
      data: {
        name: category,
      }
    })
  }
}

export default new API();

これで大分見やすくなりました。こちらの方が何のためのメソッドかがぱっと見でわかるので良い気がします。

使う時はAPI.メソッド名とするだけで呼び出すことができます。
axiosは非同期処理ですので呼び出す時はasync/awaitを追加するのを忘れないでください。

import API from '../../utils/API';


const handleSubmit = async (e) => {
  e.preventDefault();
   await API.createCategory(name, user.token)
    .then((res) => {
      ...
}

まとめ

クラス化した方がコードがスッキリして再利用しすくなりました。

話が変わりますが.envファイルに入れた環境変数が呼ばれないのなんでだろうと思ってたのですがcreate-react-app を使うと REACT_APP_ を環境変数の前に入れないといけないみたいです。

参照