axios 인스턴스 사용법

파일생성

/shared/api.jsx

import axios from 'axios'

const BASE_URL = '주소~'

// 단순 get요청으로 인증값이 필요없는 경우
const axiosApi = (url, options) => {
  const instance = axios.create({ baseURL: url, ...options })
  return instance
}

// post, delete등 api요청 시 인증값이 필요한 경우
const axiosAuthApi = (url, options) => {
  const token = '토큰 값'
  const instance = axios.create({
    baseURL: url,
    headers: { Authorization: 'Bearer ' + token },
    ...options,
  })
  return instance
}

export const defaultInstance = axiosApi(BASE_URL)
export const authInstance = axiosAuthApi(BASE_URL)

export const defaultInstance = axiosApi(BASE_URL) = 인증이 필요없는 axios 인스턴스
export const authInstance = axiosAuthApi(BASE_URL) = = 인증이 필요한 axios 인스턴스

사용법

import { defaultInstance, authInstance } from '@apis/utils'

// 인증이 필요없는 데이터 요청
export const getPost = async (data) => {
  try {
    const { data } = await defaultInstance.get(
      `posts/channel/${data}`,
    )
    return data
  } catch (error) {
    console.log(error)
  }
}
// 인증이 필요한 데이터 요청
export const postCreate = async (data) => {
  try {
    await authInstance.post('posts/create', data)
  } catch (error) {
    console.log(error)
  }
}

출처: https://ghost4551.tistory.com/185 [프론트 개발자들을 위한 티스토리:티스토리]