axios를 알아갈 수록 아직도 모르는게 너무 많다🥲

최근 headers에 같은 값을 넘겨주어야하는 상황이 생겼는데
매번 적어주기엔 너무 귀찮더라,,, (나 벌써 개발자 마인드인건가🧐)

graphql에서는 컴포넌트로 뺐던 기억이 나서 axios도 분명이 있겠구나 싶어서 공부해봤다!

✏️ 기존의 코드

const sendEmail = async () => {
    try {
      const response = await axios.post(SENDNAVEREMAIL, {
        email,
      },{
      	headers:{
    				"Content-Type": "application/json",
     				Authorization: `Bearer ${accessToken}`,
  				},
      });
      alert(`${email}로 메일이 전송 되었습니다`);
      console.log(response);
    } catch (error) {
      console.log(error);
    }
  };

headers에 accessToken의 값을 받아와서 Authorization부분에 넣어주어야하는데
post 요청을 보내는 함수 마다 headers에 accessToken의 값을 받아와서 Authorization에 넣어주어야한다면 너무나 비효율적인 코드가 될것이다 그래서 axios를 분리하여 사용할 수 있는 것이
axios.create이다

✏️ axios.create

import axios from "axios";

const baseURL = process.env.REACT_APP_DB_HOST;

const authInstance = () => {
   const token = "accessToken";
   const instance = axios.create({
     baseURL,
     headers: {
       "Content-Type": "application/json",
       Authorization: `bearer ${token}`,
     },
     ...options,
   });

   return instance;
 };

export const instance = authInstance

이렇게 만들어주면 요청할때마다 accssToken값을 넣어주지 않아도
instance 컴포넌트를 불러와서 사용하면 토큰값을 넘겨줄 수 있다

baseUrl도 적어주기 때문에 post 요청시 주소를 적어주는 부분에는 baseUrl을 제외한 뒷부분만 적어주면 된다

✏️ 수정된 코드

const sendEmail = async () => {
    try {
      const response = await instance.post(SENDNAVEREMAIL, {
        email,
      });
      alert(`${email}로 메일이 전송 되었습니다`);
      console.log(response);
    } catch (error) {
      console.log(error);
    }
  };
 

간단하고 여러번 사용이 가능한 코드가 되었다!