useApi.ts 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. import axios from 'axios'
  2. // Axios 인스턴스 생성
  3. const createApiClient = () => {
  4. const config = useRuntimeConfig()
  5. const apiBase = config.public.apiBase || 'http://localhost'
  6. const client = axios.create({
  7. baseURL: apiBase,
  8. timeout: 10000,
  9. headers: {
  10. 'Content-Type': 'application/json',
  11. 'X-Requested-With': 'XMLHttpRequest'
  12. }
  13. })
  14. // 요청 인터셉터
  15. client.interceptors.request.use(
  16. (config) => {
  17. //console.log('API Request:', config.method?.toUpperCase(), config.url)
  18. return config
  19. },
  20. (error) => {
  21. return Promise.reject(error)
  22. }
  23. )
  24. // 응답 인터셉터
  25. client.interceptors.response.use(
  26. (response) => {
  27. return response
  28. },
  29. (error) => {
  30. console.error('API Error:', error.response?.status, error.response?.data)
  31. return Promise.reject(error)
  32. }
  33. )
  34. return client
  35. }
  36. // API 클라이언트 싱글톤
  37. let apiClient = null
  38. const getApiClient = () => {
  39. if (!apiClient) {
  40. apiClient = createApiClient()
  41. }
  42. return apiClient
  43. }
  44. // 글로벌 API 메서드들 (직접 사용 가능)
  45. export const $get = async (url, params = {}) => {
  46. try {
  47. const client = getApiClient()
  48. const response = await client.get(url, { params })
  49. return response.data
  50. } catch (error) {
  51. throw error
  52. }
  53. }
  54. export const $post = async (url, data = {}) => {
  55. try {
  56. const client = getApiClient()
  57. const response = await client.post(url, data)
  58. return response.data
  59. } catch (error) {
  60. throw error
  61. }
  62. }
  63. export const $postForm = async (url, data = {}) => {
  64. try {
  65. const client = getApiClient()
  66. const formData = new FormData()
  67. Object.keys(data).forEach(key => {
  68. formData.append(key, data[key])
  69. })
  70. const response = await client.post(url, formData, {
  71. headers: {
  72. 'Content-Type': 'multipart/form-data'
  73. }
  74. })
  75. return response.data
  76. } catch (error) {
  77. throw error
  78. }
  79. }
  80. export const put = async (url, data = {}) => {
  81. try {
  82. const client = getApiClient()
  83. const response = await client.put(url, data)
  84. return response.data
  85. } catch (error) {
  86. throw error
  87. }
  88. }
  89. export const del = async (url, params = {}) => {
  90. try {
  91. const client = getApiClient()
  92. const response = await client.delete(url, { params })
  93. return response.data
  94. } catch (error) {
  95. throw error
  96. }
  97. }
  98. // Nuxt 4 composables를 위한 기본 export
  99. export default () => ({
  100. get,
  101. post,
  102. postForm,
  103. put,
  104. delete: del
  105. })
  106. // 기존 useApi 호환성을 위해 유지
  107. export const useApi = () => ({
  108. get,
  109. post,
  110. postForm,
  111. put,
  112. delete: del
  113. })